Release 1.0.0-alpha.8

build fix
2025-12-22 01:44:25 +04:00 · 2020-10-28 15:13:30 +01:00 · 2020-10-28 15:10:10 +01:00 · 2020-10-28 10:40:12 +01:00 · 2020-10-27 21:51:54 +01:00 · 2020-10-27 21:51:50 +01:00
2226 changed files with 115064 additions and 79648 deletions
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -0,0 +1,36 @@
+{
+  "files": [
+    {
+      "path": "./dist/css/tabler.css",
+      "maxSize": "55 kB"
+    },
+    {
+      "path": "./dist/css/tabler.min.css",
+      "maxSize": "45 kB"
+    },
+    {
+      "path": "./dist/css/tabler-flags.css",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "./dist/css/tabler-flags.min.css",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "./dist/css/tabler-payments.css",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "./dist/css/tabler-payments.min.css",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "./dist/js/tabler.js",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "./dist/js/tabler.min.js",
+      "maxSize": "1.5 kB"
+    }
+  ]
+}
--- a/.dependabot/config.yml
+++ b/.dependabot/config.yml
@@ -3,7 +3,7 @@ version: 1
 update_configs:
  - package_manager: "javascript"
    directory: "/"
-    update_schedule: "weekly"
+    update_schedule: "monthly"
    default_reviewers:
      - "codecalm"
    default_labels:
--- a/.editorconfig
+++ b/.editorconfig
@@ -6,7 +6,7 @@ indent_style=tab
 tab_width=3
 max_line_length=off

-[*.{rb,yml,scss}]
+[*.{rb,yml,scss,json}]
 indent_style=space
 indent_size=2

--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,30 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: "[BUG] "
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+
+A clear and concise description of what the bug is.
+
+**Device**
+
+ - Browser [e.g. Chrome ver.22, Safari ver.10]
+ - OS: [e.g. Windows 10]
+ - Screen size [e.g. 800x600]
+
+**To reproduce**
+
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '...'
+3. Scroll down to '...'
+4. See error
+
+**Screenshots**
+
+If applicable, add screenshots to help explain this problem.
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,17 @@
+---
+name: Feature request
+about: Suggest an idea for Tabler
+title: "[FEATURE] "
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Example: I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
--- a/.gitignore
+++ b/.gitignore
@@ -1,16 +1,16 @@
 node_modules/
-/package-lock.json
 .idea/
 /db.json
 .jekyll-metadata
 .jekyll-cache
 /tmp/
+/.tmp/
 /tmp-dist/
 /yarn.lock
 .DS_Store
-/Gemfile.lock
 /_site/
 /.cache/
+.sass-cache/

 .vscode/

@@ -20,3 +20,4 @@ node_modules/
 /resources/
 /svg-tmp/
 /components/
+/percy.sh
--- a/.gitpod.yml
+++ b/.gitpod.yml
@@ -0,0 +1,3 @@
+tasks:
+  - init: npm install && npm run build
+    command: npm run start
--- a/4
+++ b/4
@@ -1,6 +1,6 @@
 source "https://rubygems.org"

-gem "jekyll"
+gem "jekyll", "4.1.1"

 group :jekyll_plugins do
 	gem 'jekyll-toc'
@@ -11,3 +11,5 @@ group :jekyll_plugins do
 end

 gem 'wdm', '>= 0.1.1' if Gem.win_platform?
+
+
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -0,0 +1,91 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.7.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.7)
+    em-websocket (0.5.2)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7)
+    ffi (1.13.1)
+    forwardable-extended (2.6.0)
+    htmlbeautifier (1.3.1)
+    htmlcompressor (0.4.0)
+    http_parser.rb (0.6.0)
+    i18n (1.8.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.1.1)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (~> 2.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.1)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (~> 0.4.0)
+      pathutil (~> 0.9)
+      rouge (~> 3.0)
+      safe_yaml (~> 1.0)
+      terminal-table (~> 1.8)
+    jekyll-random (0.1)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-redirect-from (0.16.0)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-sass-converter (2.1.0)
+      sassc (> 2.0.1, < 3.0)
+    jekyll-tidy (0.2.2)
+      htmlbeautifier
+      htmlcompressor
+      jekyll
+    jekyll-timeago (0.13.1)
+      mini_i18n (>= 0.8.0)
+    jekyll-toc (0.14.0)
+      jekyll (>= 3.8)
+      nokogiri (~> 1.10)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.3.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.3)
+    listen (3.2.1)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    mini_i18n (0.8.0)
+    mini_portile2 (2.4.0)
+    nokogiri (1.10.10)
+      mini_portile2 (~> 2.4.0)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (4.0.6)
+    rb-fsevent (0.10.4)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.4)
+    rouge (3.23.0)
+    safe_yaml (1.0.5)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    terminal-table (1.8.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    unicode-display_width (1.7.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll (= 4.1.1)
+  jekyll-random
+  jekyll-redirect-from
+  jekyll-tidy
+  jekyll-timeago
+  jekyll-toc
+
+BUNDLED WITH
+   2.1.4
--- a/README.md
+++ b/README.md
@@ -2,21 +2,19 @@

 A premium and open source dashboard template with a responsive and high-quality UI.

-👉 [Become a sponsor to Tabler](https://github.com/sponsors/codecalm) 🚀
-
-<br><br><br>
-
-[![Backers on Open Collective](https://opencollective.com/tabler/backers/badge.svg)](#backers)
- [![Sponsors on Open Collective](https://opencollective.com/tabler/sponsors/badge.svg)](#sponsors)
-
-
 <strong><a href="https://preview-dev.tabler.io">View Demo</a> | <a href="https://github.com/tabler/tabler-react">View React Version</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a> | <a href="https://join.slack.com/t/tabler-ui/shared_invite/enQtMzQxMTYxODk5NDYwLWU4Y2FiNWYxN2UyNWUzOTBjNmU0ZGM2ZDViMjQzMWMyZWM0ZDFkMGRhZGFiYzFhZjM1NmIxOGQ2ZDUwZjlhMTU">Join us on Slack</a></strong>

-![Tabler preview](https://raw.githubusercontent.com/tabler/tabler/dev/static/tabler-preview.png)
+![Tabler preview](/static/tabler-preview.png?raw=true)
+

 ## Status

-<a href="https://www.npmjs.com/package/tabler"><a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"/></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"/></a> <img src="https://img.shields.io/npm/dt/tabler.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler.svg" alt="Latest Release"></a>
+<a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"></a> 
+<a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"></a> 
+<a href="https://www.npmjs.com/package/tabler"><img src="https://img.shields.io/npm/dt/tabler.svg" alt="Total Downloads"></a> 
+<a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg" alt="License"></a> 
+<a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler.svg" alt="Latest Release"></a>
+

 ## Features

@@ -29,13 +27,35 @@ We've created this admin panel for everyone who wants to create templates based
 * **Demo pages**: Tabler features over 20 individual pages using various components, which gives you the freedom to choose and combine. All components can vary in color and styling that you can easily modify using Sass. Sky is the limit!
 * **Single Page Application versions:** [Tabler React](https://github.com/tabler/tabler-react) has React components for Tabler.

+
+## Sponsor Tabler
+
+<a href="https://github.com/sponsors/codecalm" target="_blank"><img src="/static/sponsor-banner-readme.png?raw=true" alt="Sponsor Tabler" /></a>
+
+
+### Sponsors
+
+Support this project by becoming a sponsor. Your logo will show up in this README with a link to your website. [Become a sponsor!](https://opencollective.com/tabler#sponsor)
+
+<a href="https://opencollective.com/tabler/tiers/sponsor/0/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/0/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/1/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/1/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/2/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/2/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/3/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/3/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/4/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/4/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/5/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/5/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/6/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/6/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/7/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/7/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/8/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/8/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/9/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/9/avatar.svg" /></a>
+
+
 ## Setup environment

 To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow the steps below:

 1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
 2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
-3. [Install Ruby](https://ruby-lang.org/en/documentation/installation/) - the recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
+3. [Install Ruby](https://www.ruby-lang.org/en/documentation/installation/) - the recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
 4. [Install Bundler](https://bundler.io) with `gem install bundler` and finally run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).

 **Windows users**:
@@ -46,6 +66,7 @@ To use our build system and run our documentation locally, you'll need a copy of

 Once you complete the setup, you'll be able to run the various commands provided from the command line.

+
 ## Build locally

 1. From the root `/tabler` directory, run `npm run start` in the command line.
@@ -56,14 +77,17 @@ Once you complete the setup, you'll be able to run the various commands provided
 Run `npm run build` for reforms a one off build application without refresh.
 Open [http://localhost:3001](http://localhost:3001) to configure the Web server.

+
 ## Feature requests

 https://tabler.canny.io/feature-requests

+
 ## Bugs and feature requests

 Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).

+
 ## Creators

 **Paweł Kuna**
@@ -72,33 +96,19 @@ Found a bug or have a feature request? [Please open a new issue](https://github.
 - <https://github.com/codecalm>
 - <https://codecalm.net>

-## Contributors

-This project exists thanks to all the people who contribute. [[Contribute](https://github.com/tabler/tabler/graphs/contributors)].
-<a href="https://github.com/tabler/tabler/graphs/contributors"><img src="https://opencollective.com/tabler/contributors.svg?width=890&button=false"></a>
+### Contributors

-## Backers
+This project exists thanks to all the people who contribute.

-Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/tabler#backer)]
+<img src="https://opencollective.com/tabler/contributors.svg?width=890&button=false" />

-<a href="https://opencollective.com/tabler#backers" target="_blank"><img src="https://opencollective.com/tabler/backers.svg?width=890"></a>
+### Backers

+Thank you to all our backers! 🙏 [Become a backer](https://opencollective.com/tabler#backer)

-## Sponsors
+<a href="https://opencollective.com/tabler#backers" target="_blank"><img src="https://opencollective.com/tabler/tiers/backer.svg?width=890&button=false" /></a>

-Support this project by becoming a sponsor. Your logo will be displayed here with a link to your website. [[Become a sponsor](https://opencollective.com/tabler#sponsor)]
+## License

-<a href="https://opencollective.com/tabler/sponsor/0/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/0/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/1/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/1/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/2/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/2/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/3/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/3/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/4/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/4/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/5/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/5/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/6/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/6/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/7/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/7/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/8/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/8/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/9/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/9/avatar.svg"></a>
-
-## Copyright and license
-
-Code and documentation copyright 2018 the [Tabler Authors](https://github.com/tabler/tabler/graphs/contributors) and [codecalm.net](https://codecalm.net). Code released under the [MIT License](https://github.com/tabler/tabler/blob/master/LICENSE).
+See the [LICENSE](https://github.com/tabler/tabler/blob/master/LICENSE) file.
--- a/_config.yml
+++ b/_config.yml
@@ -1,14 +1,24 @@
-source: pages
+source: src/pages
 destination: tmp

-version: 1.0.0-alpha.3
+keep_files:
+  - css
+  - js
+  - img
+  - dist
+  - static
+
 title: Tabler
 description: Premium and Open Source dashboard template with responsive and high quality UI.
+homepage: https://tabler.io
 github_url: https://github.com/tabler/tabler
+sponsor_url: https://github.com/sponsors/codecalm
+
+mapbox_key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ

 debug: false

-dark-theme: false
+layout-dark: false

 plugins:
  - jekyll-random
@@ -24,11 +34,7 @@ tabler-plugins:

 exclude:
  - .jekyll-cache
-
-keep_files:
-  - css/ui-kit.css
-  - css/dark.css
-  - css/rtl.css
+  - redirects.json

 markdown: kramdown
 kramdown:
@@ -41,16 +47,12 @@ jekyll_tidy:

 toc:
  min_level: 2
-  max_level: 2
+  max_level: 3
  list_class: list-unstyled

 collections:
  docs:
-    output: false
-  changelog:
-    output: false
-  components:
-    output: false
+    output: true

 defaults:
  - scope:
@@ -67,11 +69,7 @@ defaults:
      type: "docs"
    values:
      layout: docs
-  - scope:
-      type: "components"
-    values:
-      layout: component
-
+      toc: true

 colors:
  blue:
@@ -126,11 +124,11 @@ variants:
  - name: success
    icon: check
  - name: info
-    icon: info
+    icon: info-circle
  - name: warning
    icon: alert-triangle
  - name: danger
-    icon: x-octagon
+    icon: alert-circle

 button-variants:
  primary:
@@ -213,5 +211,5 @@ socials:
    icon: brand/tabler
    title: Tabler

-months_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-months_long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+months-short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+months-long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
--- a/build/banner.js
+++ b/build/banner.js
@@ -1,14 +0,0 @@
-'use strict';
-
-const pkg = require('../package.json'),
-	year = new Date().getFullYear();
-
-function getBanner(pluginFilename) {
-	return `/*!
-  * Tabler${pluginFilename ? ` ${pluginFilename}` : ''} v${pkg.version} (${pkg.homepage})
-  * Copyright 2018-${year} ${pkg.author}
-  * Licensed under ${pkg.license} (https://github.com/tabler/tabler/blob/master/LICENSE)
-  */`;
-}
-
-module.exports = getBanner;
--- a/build/browsersync.js
+++ b/build/browsersync.js
@@ -1,37 +0,0 @@
-/*
- * Tabler (v0.9.0): browsersync.js
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
-
-const bs = require('browser-sync').create();
-
-bs.init({
-	watch: true,
-	server: {
-		routes: {
-			'/': 'tmp',
-			'/dist': 'tmp-dist',
-			'/libs': 'static/libs',
-			'/tmp-dist/img': 'img',
-			'/static': 'static',
-			'/node_modules': 'node_modules',
-		},
-	},
-	files: ['tmp/**/*', 'tmp-dist/css/*.css', 'tmp-dist/js/*.js', 'tmp-dist/img/*.svg'],
-	watchOptions: {
-		ignoreInitial: true,
-	},
-	reloadDelay: 1000,
-	notify: false,
-	open: false,
-	snippetOptions: {
-		rule: {
-			match: /<\/head>/i,
-			fn: function (snippet, match) {
-				return snippet + match;
-			}
-		}
-	}
-});
--- a/build/capture-components.sh
+++ b/build/capture-components.sh
@@ -1,11 +0,0 @@
-rm -rf ../static/img/components/*
-
-for file in ../pages/_components/*.html; do
-  file="$(basename -- $file)"
-  file="${file%.html}"
-  url="http://localhost:3001/components/$file.html"
-  echo $url
-
-  capture-website $url --element="#component-wrapper" --scale-factor=2 >../static/img/components/$file.png
-  convert ../static/img/components/$file.png -gravity Center -crop 1648x824-0-0! -background "#F5F7FB" -flatten +repage -resize 1280x640 ../static/img/components/$file.png
-done
--- a/build/copy-libs.js
+++ b/build/copy-libs.js
@@ -1,33 +0,0 @@
-if (!Array.prototype.flat) {
-	Object.defineProperty(Array.prototype, 'flat', {
-		value: function (depth = 1) {
-			return this.reduce(function (flat, toFlatten) {
-				return flat.concat((Array.isArray(toFlatten) && (depth > 1)) ? toFlatten.flat(depth - 1) : toFlatten);
-			}, []);
-		}
-	});
-}
-
-
-const all_libs = require('../pages/_data/libs'),
-	path = require('path'),
-	{ exec } = require('child_process');
-
-let files = [];
-
-Object.keys(all_libs.js).forEach(function (lib) {
-	files.push(Array.isArray(all_libs.js[lib]) ? all_libs.js[lib] : [all_libs.js[lib]]);
-});
-
-Object.keys(all_libs.css).forEach(function (lib) {
-	files.push(Array.isArray(all_libs.css[lib]) ? all_libs.css[lib] : [all_libs.css[lib]]);
-});
-
-files = files.flat();
-
-files.forEach(function (file) {
-	let dirname = path.dirname(file).replace('@', '');
-	let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${file} dist/libs/${file.replace('@', '')}`;
-
-	exec(cmd)
-});
--- a/build/postcss.config.js
+++ b/build/postcss.config.js
@@ -1,22 +0,0 @@
-/*
- * Tabler (v0.9.0): postcss.config.js
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
-
-'use strict';
-
-module.exports = ctx => ({
-	map: {
-		inline: false,
-		annotation: true,
-		sourcesContent: true
-	},
-	plugins: {
-		autoprefixer: {
-			cascade: false,
-			grid: "autoplace"
-		}
-	}
-});
--- a/build/rollup.config.js
+++ b/build/rollup.config.js
@@ -1,54 +0,0 @@
-/*
- * Tabler (v0.9.0): rollup.config.js
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
-
-'use strict';
-
-const BUNDLE = process.env.BUNDLE === 'true';
-const dir = BUNDLE ? 'dist' : 'tmp-dist';
-
-import path from 'path';
-import babel from 'rollup-plugin-babel';
-import resolve from 'rollup-plugin-node-resolve';
-import minify from 'rollup-plugin-babel-minify';
-import commonjs from 'rollup-plugin-commonjs';
-
-const fileDest = 'tabler',
-	banner = require('./banner');
-
-let plugins = [
-	resolve(),
-	commonjs()
-];
-
-if (BUNDLE) {
-	plugins = plugins.concat([
-		babel({
-			exclude: 'node_modules/**'
-		}),
-		minify({
-			comments: false
-		})
-	]);
-}
-
-
-module.exports = {
-	context: "window",
-	input: {
-		tabler: path.resolve(__dirname, '../js/tabler.js'),
-		// 'tabler-charts': path.resolve(__dirname, '../js/tabler-charts.js'),
-		'tabler-range-sliders': path.resolve(__dirname, '../js/tabler-range-sliders.js')
-	},
-	output: {
-		banner,
-		// name: 'tabler',
-		dir: path.resolve(__dirname, `../${dir}/js/`),
-		entryFileNames: BUNDLE ? '[name].min.js' : '[name].js',
-		format: 'cjs'
-	},
-	plugins,
-};
--- a/build/scss-compile.js
+++ b/build/scss-compile.js
@@ -1,50 +0,0 @@
-/*
- * Tabler (v0.9.0): scss-compile.js
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
-
-const BUNDLE = process.env.BUNDLE === 'true';
-
-const path = require('path'),
-	glob = require("glob"),
-	fs = require("fs"),
-	sass = require("node-sass"),
-	packageImporter = require('node-sass-package-importer');
-
-const dir = BUNDLE ? 'dist' : 'tmp-dist';
-
-glob("scss/{tabler*,demo}.scss", {}, function (er, files) {
-	files.forEach(function (file) {
-		var basename = path.basename(file, '.scss');
-
-		sass.render(
-			{
-				file: file,
-				outFile: `${dir}/css/${basename}.css`,
-				sourceMap: true,
-				sourceMapContents: true,
-				precision: 7,
-				importer: packageImporter()
-			},
-			(error, result) => {
-				if (!error) {
-					fs.writeFile(`${dir}/css/${basename}.css`, result.css, error => {
-						if (error) {
-							console.log(error);
-						}
-					});
-
-					fs.writeFile(`${dir}/css/${basename}.css.map`, result.map, error => {
-						if (error) {
-							console.log(error);
-						}
-					});
-				} else {
-					throw error;
-				}
-			}
-		);
-	});
-});
--- a/build/unused-files.js
+++ b/build/unused-files.js
@@ -1,27 +0,0 @@
-const glob = require("glob"),
-	fs = require("fs");
-
-let foundFiles = [];
-
-glob.sync("pages/**/*.{html,md}").forEach(function (file) {
-	let fileContent = fs.readFileSync(file);
-
-	fileContent.toString().replace(/\{% include(_cached)? ([a-z0-9\/_-]+\.html)/g, function (f, c, filename) {
-		filename = 'pages/_includes/' + filename;
-
-		if (!foundFiles.includes(filename)) {
-			foundFiles.push(filename);
-		}
-	});
-});
-
-let includeFiles = glob.sync("pages/_includes/**/*.html");
-
-includeFiles.forEach(function (file) {
-	if (!foundFiles.includes(file)) {
-		console.log('file', file);
-	}
-});
-
-// console.log('foundFiles', foundFiles);
-// console.log('includeFiles', includeFiles);
--- a/demo/400.html
+++ b/demo/400.html
@@ -1,198 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Page 400 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased border-top-wide border-primary d-flex flex-column">
-    <div class="flex-fill d-flex align-items-center justify-content-center">
-      <div class="container-tight py-6">
-        <div class="empty">
-          <div class="empty-icon">
-            <div class="display-4">400</div>
-          </div>
-          <p class="empty-title h3">Oops… You just found an error page</p>
-          <p class="empty-subtitle text-muted">
-            We are sorry but your request contains bad syntax and cannot be fulfilled
-          </p>
-          <div class="empty-action">
-            <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-              Take me home
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <script src="./dist/libs/autosize/dist/autosize.min.js?1580339009"></script>
-    <script src="./dist/libs/imask/dist/imask.min.js?1580339009"></script>
-    <script src="./dist/libs/apexcharts/dist/apexcharts.min.js?1580339009"></script>
-    <script src="./dist/libs/nouislider/distribute/nouislider.min.js?1580339009"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
-    <script>
-      // @formatter:off
-      noUiSlider.create(document.getElementById('range-simple'), {
-      	start: 20,
-      	connect: [true, false],
-      	step: 10,
-      	range: {
-      		min: 0,
-      		max: 100
-      	}
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      noUiSlider.create(document.getElementById('range-connect'), {
-      	start: [60, 90],
-      	connect: [false, true, false],
-      	step: 10,
-      	range: {
-      		min: 0,
-      		max: 100
-      	}
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      noUiSlider.create(document.getElementById('range-color'), {
-      	start: 40,
-      	connect: [true, false],
-      	step: 10,
-      	range: {
-      		min: 0,
-      		max: 100
-      	}
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-revenue-bg'), {
-      		chart: {
-      			type: "area",
-      			fontFamily: 'inherit',
-      			height: 40.0,
-      			sparkline: {
-      				enabled: true
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: .16,
-      			type: 'solid'
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "smooth",
-      		},
-      		series: [{
-      			name: "Profits",
-      			data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
-      		}],
-      		grid: {
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0
-      			},
-      			tooltip: {
-      				enabled: false
-      			},
-      			axisBorder: {
-      				show: false,
-      			},
-      			type: 'datetime',
-      		},
-      		yaxis: {
-      			labels: {
-      				padding: 4
-      			},
-      		},
-      		labels: [
-      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
-      		],
-      		colors: ["#206bc4"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      (function () {
-      	const elements = document.querySelectorAll('[data-toggle="autosize"]');
-      	if (elements.length) {
-      		elements.forEach(function (element) {
-      			autosize(element);
-      		});
-      	}
-      })();
-    </script>
-    <script>
-      (function () {
-      	const $elem = $('[data-mask]');
-      	if ($elem) {
-      		$elem.each(function () {
-      			IMask($(this).get(0), {
-      				mask: $(this).attr('data-mask'),
-      				lazy: $(this).attr('data-mask-visible') === 'true',
-      			});
-      		});
-      	}
-      })();
-    </script>
-  </body>
-</html>
--- a/demo/401.html
+++ b/demo/401.html
@@ -1,70 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Page 401 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased border-top-wide border-primary d-flex flex-column">
-    <div class="flex-fill d-flex align-items-center justify-content-center">
-      <div class="container-tight py-6">
-        <div class="empty">
-          <div class="empty-icon">
-            <div class="display-4">401</div>
-          </div>
-          <p class="empty-title h3">Oops… You just found an error page</p>
-          <p class="empty-subtitle text-muted">
-            We are sorry but you are not authorized to access this page
-          </p>
-          <div class="empty-action">
-            <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-              Take me home
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
-  </body>
-</html>
--- a/demo/403.html
+++ b/demo/403.html
@@ -1,70 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Page 403 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased border-top-wide border-primary d-flex flex-column">
-    <div class="flex-fill d-flex align-items-center justify-content-center">
-      <div class="container-tight py-6">
-        <div class="empty">
-          <div class="empty-icon">
-            <div class="display-4">403</div>
-          </div>
-          <p class="empty-title h3">Oops… You just found an error page</p>
-          <p class="empty-subtitle text-muted">
-            We are sorry but you do not have permission to access this page
-          </p>
-          <div class="empty-action">
-            <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-              Take me home
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
-  </body>
-</html>
--- a/demo/404.html
+++ b/demo/404.html
@@ -1,70 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Page 404 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased border-top-wide border-primary d-flex flex-column">
-    <div class="flex-fill d-flex align-items-center justify-content-center">
-      <div class="container-tight py-6">
-        <div class="empty">
-          <div class="empty-icon">
-            <div class="display-4">404</div>
-          </div>
-          <p class="empty-title h3">Oops… You just found an error page</p>
-          <p class="empty-subtitle text-muted">
-            We are sorry but the page you are looking for was not found
-          </p>
-          <div class="empty-action">
-            <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-              Take me home
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
-  </body>
-</html>
--- a/demo/500.html
+++ b/demo/500.html
@@ -1,70 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Page 500 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased border-top-wide border-primary d-flex flex-column">
-    <div class="flex-fill d-flex align-items-center justify-content-center">
-      <div class="container-tight py-6">
-        <div class="empty">
-          <div class="empty-icon">
-            <div class="display-4">500</div>
-          </div>
-          <p class="empty-title h3">Oops… You just found an error page</p>
-          <p class="empty-subtitle text-muted">
-            We are sorry but our server encountered an internal error
-          </p>
-          <div class="empty-action">
-            <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-              Take me home
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
-  </body>
-</html>
--- a/demo/503.html
+++ b/demo/503.html
@@ -1,70 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Page 503 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased border-top-wide border-primary d-flex flex-column">
-    <div class="flex-fill d-flex align-items-center justify-content-center">
-      <div class="container-tight py-6">
-        <div class="empty">
-          <div class="empty-icon">
-            <div class="display-4">503</div>
-          </div>
-          <p class="empty-title h3">Oops… You just found an error page</p>
-          <p class="empty-subtitle text-muted">
-            We are sorry but our service is currently not available
-          </p>
-          <div class="empty-action">
-            <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-              Take me home
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
-  </body>
-</html>
--- a/demo/all.html
+++ b/demo/all.html
--- a/demo/blank.html
+++ b/demo/blank.html
@@ -1,17 +1,19 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* @version 1.0.0-alpha.8
+* @link https://tabler.io
+* Copyright 2018-2020 The Tabler Authors
+* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Blank page - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <meta name="msapplication-TileColor" content="#206bc4"/>
    <meta name="theme-color" content="#206bc4"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -22,123 +24,100 @@
    <meta name="robots" content="noindex,nofollow,noarchive"/>
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Blank page - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
  </head>
  <body class="antialiased">
    <div class="page">
-      <div class="content">
-        <header class="navbar-wrap navbar-expand-lg flex-column">
-          <div class="navbar navbar-border navbar-light bg-white">
-            <div class="container">
-              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <a href="." class="navbar-brand hide-sidebar-visible m-0">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+      <header class="navbar navbar-expand-md navbar-light">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
+            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
+          </a>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item dropdown d-none d-md-flex mr-3">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                <span class="badge bg-red"></span>
              </a>
-              <ul class="nav navbar-menu align-items-center ml-auto">
-                <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-                    </svg>
-                    Source code
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block lh-1">
-                      Leesa Beaty
-                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                    </span>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      Profile
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                      Settings
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                      Inbox
-                      <span class="badge bg-primary ml-auto">6</span>
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                      Message
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-                      Need help?
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                      Sign out
-                    </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
                  </div>
-                </li>
-              </ul>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
+                  Separated link</a>
+              </div>
            </div>
          </div>
-          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
-            <div class="container">
-              <ul class="navbar-nav flex-wrap flex-fill">
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
                <li class="nav-item">
                  <a class="nav-link" href="./index.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                    </span>
-                    Dashboard
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./form-elements.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                    <span class="nav-link-title">
+                      Home
                    </span>
-                    Form elements
                  </a>
                </li>
                <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="true" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      User Interface
                    </span>
-                    Base
                  </a>
-                  <ul class="dropdown-menu">
+                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
+                    <li >
+                      <a class="dropdown-item" href="./empty.html" >
+                        Empty page
+                      </a>
+                    </li>
                    <li >
                      <a class="dropdown-item active" href="./blank.html" >
-                        Starter page
+                        Blank page
                      </a>
                    </li>
                    <li >
                      <a class="dropdown-item" href="./buttons.html" >
                        Buttons
-                        <span class="badge bg-green ml-auto">New</span>
                      </a>
                    </li>
                    <li >
@@ -146,14 +125,54 @@
                        Cards
                      </a>
                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./dropdowns.html" >
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./icons.html" >
+                        Icons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./modals.html" >
+                        Modals
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./maps.html" >
+                        Maps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./maps-vector.html" >
+                        Vector maps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./navigation.html" >
+                        Navigation
+                      </a>
+                    </li>
                    <li >
                      <a class="dropdown-item" href="./charts.html" >
                        Charts
                      </a>
                    </li>
                    <li >
-                      <a class="dropdown-item" href="./datatables.html" >
-                        Data Tables
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./tables.html" >
+                        Tables
                      </a>
                    </li>
                    <li >
@@ -171,26 +190,6 @@
                        Lists
                      </a>
                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./music.html" >
-                        Music
-                      </a>
-                    </li>
                    <li class="dropright">
                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                        Authentication
@@ -207,51 +206,29 @@
                        Error pages
                      </a>
                      <div class="dropdown-menu">
-                        <a href="./400.html" class="dropdown-item">400 page</a>
-                        <a href="./401.html" class="dropdown-item">401 page</a>
-                        <a href="./403.html" class="dropdown-item">403 page</a>
-                        <a href="./404.html" class="dropdown-item">404 page</a>
-                        <a href="./500.html" class="dropdown-item">500 page</a>
-                        <a href="./503.html" class="dropdown-item">503 page</a>
-                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                    </span>
-                    A
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        B
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./tmp.html" class="dropdown-item">C</a>
+                        <a href="./error-404.html" class="dropdown-item">404 page</a>
+                        <a href="./error-500.html" class="dropdown-item">500 page</a>
+                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
                      </div>
                    </li>
                  </ul>
                </li>
                <li class="nav-item">
-                  <a class="nav-link" href="./layouts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
                    </span>
-                    Layouts
                  </a>
                </li>
                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
                    </span>
-                    Extra
                  </a>
                  <ul class="dropdown-menu">
                    <li >
@@ -274,17 +251,113 @@
                        Search results
                      </a>
                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./pricing.html" >
+                        Pricing cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                  </ul>
                </li>
                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
                    </span>
-                    Documentation
                  </a>
                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./layout-horizontal.html" >
+                        Horizontal
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-vertical.html" >
+                        Vertical
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-vertical-right.html" >
+                        Right vertical
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-condensed.html" >
+                        Condensed
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-condensed-dark.html" >
+                        Condensed dark
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-combo.html" >
+                        Combined
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-dark.html" >
+                        Navbar dark
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-dark.html" >
+                        Dark mode
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-fluid.html" >
+                        Fluid
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-fluid-vertical.html" >
+                        Fluid vertical
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Docs
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
                    <li >
                      <a class="dropdown-item" href="./docs/index.html" >
                        Introduction
@@ -335,11 +408,6 @@
                        Colors
                      </a>
                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/countup.html" >
-                        Countup
-                      </a>
-                    </li>
                    <li >
                      <a class="dropdown-item" href="./docs/cursors.html" >
                        Cursors
@@ -350,6 +418,11 @@
                        Charts
                      </a>
                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/dropdowns.html" >
+                        Dropdowns
+                      </a>
+                    </li>
                    <li >
                      <a class="dropdown-item" href="./docs/divider.html" >
                        Divider
@@ -381,8 +454,8 @@
                      </a>
                    </li>
                    <li >
-                      <a class="dropdown-item" href="./docs/layout.html" >
-                        Layout
+                      <a class="dropdown-item" href="./docs/modals.html" >
+                        Modals
                      </a>
                    </li>
                    <li >
@@ -403,7 +476,6 @@
                    <li >
                      <a class="dropdown-item" href="./docs/ribbons.html" >
                        Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
                      </a>
                    </li>
                    <li >
@@ -449,11 +521,11 @@
                  </ul>
                </li>
              </ul>
-              <div class="d-none d-xl-block ml-auto">
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                <form action="." method="get">
                  <div class="input-icon">
                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
                    </span>
                    <input type="text" class="form-control" placeholder="Search…">
                  </div>
@@ -461,32 +533,52 @@
              </div>
            </div>
          </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
-            <div class="empty">
-              <div class="empty-icon">
-                <img src="./static/illustrations/undraw_printing_invoices_5r4r.svg" class="h-8 mb-4" alt="">
+        </div>
+      </div>
+      <div class="content">
+        <div class="container-xl d-flex flex-column justify-content-center">
+          <div class="empty">
+            <div class="empty-icon">
+              <img src="./static/illustrations/undraw_printing_invoices_5r4r.svg" height="128" class="mb-4"  alt="">
+            </div>
+            <p class="empty-title h3">No results found</p>
+            <p class="empty-subtitle text-muted">
+              Try adjusting your search or filter to find what you're looking for.
+            </p>
+            <div class="empty-action">
+              <a href="./." class="btn btn-primary">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
+                Add your first client
+              </a>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ml-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+                </ul>
              </div>
-              <p class="empty-title h3">No results found</p>
-              <p class="empty-subtitle text-muted">
-                Try adjusting your search or filter to find what you're looking for.
-              </p>
-              <div class="empty-action">
-                <a href="./." class="btn btn-primary">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Add your first client
-                </a>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                Copyright © 2020
+                <a href="." class="link-secondary">Tabler</a>.
+                All rights reserved.
              </div>
            </div>
-          </main>
-        </div>
+          </div>
+        </footer>
      </div>
    </div>
    <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
+    <script src="./dist/js/tabler.min.js"></script>
+    <script>
+      document.body.style.display = "block"
+    </script>
  </body>
 </html>
--- a/demo/blog.html
+++ b/demo/blog.html
@@ -1,734 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Blog - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <div class="content">
-        <header class="navbar-wrap navbar-expand-lg flex-column">
-          <div class="navbar navbar-border navbar-light bg-white">
-            <div class="container">
-              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <a href="." class="navbar-brand hide-sidebar-visible m-0">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
-              </a>
-              <ul class="nav navbar-menu align-items-center ml-auto">
-                <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-                    </svg>
-                    Source code
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block lh-1">
-                      Leesa Beaty
-                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                    </span>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      Profile
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                      Settings
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                      Inbox
-                      <span class="badge bg-primary ml-auto">6</span>
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                      Message
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-                      Need help?
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                      Sign out
-                    </a>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
-            <div class="container">
-              <ul class="navbar-nav flex-wrap flex-fill">
-                <li class="nav-item">
-                  <a class="nav-link" href="./index.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                    </span>
-                    Dashboard
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./form-elements.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                    </span>
-                    Form elements
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                    </span>
-                    Base
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./blank.html" >
-                        Starter page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./buttons.html" >
-                        Buttons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./datatables.html" >
-                        Data Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./400.html" class="dropdown-item">400 page</a>
-                        <a href="./401.html" class="dropdown-item">401 page</a>
-                        <a href="./403.html" class="dropdown-item">403 page</a>
-                        <a href="./404.html" class="dropdown-item">404 page</a>
-                        <a href="./500.html" class="dropdown-item">500 page</a>
-                        <a href="./503.html" class="dropdown-item">503 page</a>
-                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                    </span>
-                    A
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        B
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./tmp.html" class="dropdown-item">C</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./layouts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                    </span>
-                    Layouts
-                  </a>
-                </li>
-                <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="true" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                    </span>
-                    Extra
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item active" href="./blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                    </span>
-                    Documentation
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/countup.html" >
-                        Countup
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/layout.html" >
-                        Layout
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/ribbons.html" >
-                        Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="d-none d-xl-block ml-auto">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
-            <!-- Page title -->
-            <div class="page-title-box">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <h2 class="page-title">
-                    Blog
-                  </h2>
-                </div>
-              </div>
-            </div>
-            <div class="row row-deck">
-              <div class="col-sm-6 col-xl-4">
-                <div class="card d-flex flex-column">
-                  <a href="#">
-                    <img class="card-img-top" src="./static/photos//9f36332564ca271d.jpg" alt="And this isn&#39;t my nose. This is a false one.">
-                  </a>
-                  <div class="card-body d-flex flex-column">
-                    <h3 class="card-title"><a href="#">And this isn't my nose. This is a false one.</a></h3>
-                    <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
-                    <div class="d-flex align-items-center pt-5 mt-auto">
-                      <span class="avatar avatar-md" style="background-image: url(./static/avatars/002m.jpg)"></span>
-                      <div class="ml-3">
-                        <a href="./profile.html" class="text-body">Dunn Slane</a>
-                        <small class="d-block text-muted">3 days ago</small>
-                      </div>
-                      <div class="ml-auto">
-                        <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-sm-6 col-xl-4">
-                <div class="card d-flex flex-column">
-                  <a href="#">
-                    <img class="card-img-top" src="./static/photos//35b88fc04a518c1b.jpg" alt="Well, I didn&#39;t vote for you.">
-                  </a>
-                  <div class="card-body d-flex flex-column">
-                    <h3 class="card-title"><a href="#">Well, I didn't vote for you.</a></h3>
-                    <div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
-                    <div class="d-flex align-items-center pt-5 mt-auto">
-                      <span class="avatar avatar-md" style="background-image: url(./static/avatars/003m.jpg)"></span>
-                      <div class="ml-3">
-                        <a href="./profile.html" class="text-body">Emmy Levet</a>
-                        <small class="d-block text-muted">3 days ago</small>
-                      </div>
-                      <div class="ml-auto">
-                        <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-sm-6 col-xl-4">
-                <div class="card d-flex flex-column">
-                  <a href="#">
-                    <img class="card-img-top" src="./static/photos//36e273986ed577b8.jpg" alt="How do you know she is a witch?">
-                  </a>
-                  <div class="card-body d-flex flex-column">
-                    <h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
-                    <div class="text-muted">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
-                    <div class="d-flex align-items-center pt-5 mt-auto">
-                      <span class="avatar avatar-md" style="background-image: url(./static/avatars/000f.jpg)"></span>
-                      <div class="ml-3">
-                        <a href="./profile.html" class="text-body">Maryjo Lebarree</a>
-                        <small class="d-block text-muted">3 days ago</small>
-                      </div>
-                      <div class="ml-auto">
-                        <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-sm-6 col-xl-4">
-                <div class="card d-flex flex-column">
-                  <div class="card-body d-flex flex-column">
-                    <h3 class="card-title"><a href="#">Weaseling out of things is important to learn.</a></h3>
-                    <div class="text-muted">Please do not offer my god a peanut. That's why I love elementary school, Edna. The children beli...</div>
-                    <div class="d-flex align-items-center pt-5 mt-auto">
-                      <span class="avatar avatar-md" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                      <div class="ml-3">
-                        <a href="./profile.html" class="text-body">Perren Keemar</a>
-                        <small class="d-block text-muted">3 days ago</small>
-                      </div>
-                      <div class="ml-auto">
-                        <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-sm-6 col-xl-4">
-                <div class="card d-flex flex-column">
-                  <div class="card-body d-flex flex-column">
-                    <h3 class="card-title"><a href="#">You don't like your job, you don't strike.</a></h3>
-                    <div class="text-muted">But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've ...</div>
-                    <div class="d-flex align-items-center pt-5 mt-auto">
-                      <span class="avatar avatar-md" style="background-image: url(./static/avatars/007m.jpg)"></span>
-                      <div class="ml-3">
-                        <a href="./profile.html" class="text-body">Sunny Airey</a>
-                        <small class="d-block text-muted">3 days ago</small>
-                      </div>
-                      <div class="ml-auto">
-                        <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-sm-6 col-xl-4">
-                <div class="card d-flex flex-column">
-                  <div class="card-body d-flex flex-column">
-                    <h3 class="card-title"><a href="#">I hope I didn't brain my damage.</a></h3>
-                    <div class="text-muted">I don't like being outdoors, Smithers. For one thing, there's too many fat children. Oh, loneline...</div>
-                    <div class="d-flex align-items-center pt-5 mt-auto">
-                      <span class="avatar avatar-md">SA</span>
-                      <div class="ml-3">
-                        <a href="./profile.html" class="text-body">Geoffry Flaunders</a>
-                        <small class="d-block text-muted">3 days ago</small>
-                      </div>
-                      <div class="ml-auto">
-                        <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-sm-6">
-                <div class="card d-flex flex-column">
-                  <div class="row row-0 flex-fill">
-                    <div class="col-md-3">
-                      <a href="#">
-                        <img src="./static/photos//9f36332564ca271d.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-                      </a>
-                    </div>
-                    <div class="col">
-                      <div class="card-body">
-                        <h3 class="card-title"><a href="#">And this isn't my nose. This is a false one.</a></h3>
-                        <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
-                        <div class="d-flex align-items-center pt-5 mt-auto">
-                          <span class="avatar avatar-md" style="background-image: url(./static/avatars/002m.jpg)"></span>
-                          <div class="ml-3">
-                            <a href="./profile.html" class="text-body">Dunn Slane</a>
-                            <small class="d-block text-muted">3 days ago</small>
-                          </div>
-                          <div class="ml-auto">
-                            <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-sm-6">
-                <div class="card d-flex flex-column">
-                  <div class="row row-0 flex-fill">
-                    <div class="col-md-3">
-                      <a href="#">
-                        <img src="./static/photos//35b88fc04a518c1b.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-                      </a>
-                    </div>
-                    <div class="col">
-                      <div class="card-body">
-                        <h3 class="card-title"><a href="#">Well, I didn't vote for you.</a></h3>
-                        <div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
-                        <div class="d-flex align-items-center pt-5 mt-auto">
-                          <span class="avatar avatar-md" style="background-image: url(./static/avatars/003m.jpg)"></span>
-                          <div class="ml-3">
-                            <a href="./profile.html" class="text-body">Emmy Levet</a>
-                            <small class="d-block text-muted">3 days ago</small>
-                          </div>
-                          <div class="ml-auto">
-                            <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-sm-6">
-                <div class="card d-flex flex-column">
-                  <div class="row row-0 flex-fill">
-                    <div class="col-md-3">
-                      <a href="#">
-                        <img src="./static/photos//802a16cdf5ce3551.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-                      </a>
-                    </div>
-                    <div class="col">
-                      <div class="card-body">
-                        <h3 class="card-title"><a href="#">Weaseling out of things is important to learn.</a></h3>
-                        <div class="text-muted">Please do not offer my god a peanut. That's why I love elementary school, Edna. The children believe anything you tell them. Brace yourselves gentlemen. According to the gas chromatograph, the secr...</div>
-                        <div class="d-flex align-items-center pt-5 mt-auto">
-                          <span class="avatar avatar-md" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                          <div class="ml-3">
-                            <a href="./profile.html" class="text-body">Perren Keemar</a>
-                            <small class="d-block text-muted">3 days ago</small>
-                          </div>
-                          <div class="ml-auto">
-                            <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-sm-6">
-                <div class="card d-flex flex-column">
-                  <div class="row row-0 flex-fill">
-                    <div class="col-md-3">
-                      <a href="#">
-                        <img src="./static/photos//0986f97be719fb9a.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-                      </a>
-                    </div>
-                    <div class="col">
-                      <div class="card-body">
-                        <h3 class="card-title"><a href="#">You don't like your job, you don't strike.</a></h3>
-                        <div class="text-muted">But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've wasted my life. Son, when you participate in sporting events, it's not whether you win or lose: it's...</div>
-                        <div class="d-flex align-items-center pt-5 mt-auto">
-                          <span class="avatar avatar-md" style="background-image: url(./static/avatars/007m.jpg)"></span>
-                          <div class="ml-3">
-                            <a href="./profile.html" class="text-body">Sunny Airey</a>
-                            <small class="d-block text-muted">3 days ago</small>
-                          </div>
-                          <div class="ml-auto">
-                            <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </main>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
-  </body>
-</html>
--- a/demo/buttons.html
+++ b/demo/buttons.html
--- a/demo/calendar.html
+++ b/demo/calendar.html
@@ -1,17 +1,19 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* @version 1.0.0-alpha.8
+* @link https://tabler.io
+* Copyright 2018-2020 The Tabler Authors
+* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Calendar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <meta name="msapplication-TileColor" content="#206bc4"/>
    <meta name="theme-color" content="#206bc4"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -22,123 +24,104 @@
    <meta name="robots" content="noindex,nofollow,noarchive"/>
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Calendar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
+    <!-- CSS files -->
+    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
  </head>
  <body class="antialiased">
    <div class="page">
-      <div class="content">
-        <header class="navbar-wrap navbar-expand-lg flex-column">
-          <div class="navbar navbar-border navbar-light bg-white">
-            <div class="container">
-              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <a href="." class="navbar-brand hide-sidebar-visible m-0">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+      <header class="navbar navbar-expand-md navbar-light">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
+            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
+          </a>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item dropdown d-none d-md-flex mr-3">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                <span class="badge bg-red"></span>
              </a>
-              <ul class="nav navbar-menu align-items-center ml-auto">
-                <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-                    </svg>
-                    Source code
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block lh-1">
-                      Leesa Beaty
-                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                    </span>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      Profile
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                      Settings
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                      Inbox
-                      <span class="badge bg-primary ml-auto">6</span>
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                      Message
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-                      Need help?
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                      Sign out
-                    </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
                  </div>
-                </li>
-              </ul>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
+                  Separated link</a>
+              </div>
            </div>
          </div>
-          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
-            <div class="container">
-              <ul class="navbar-nav flex-wrap flex-fill">
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
                <li class="nav-item">
                  <a class="nav-link" href="./index.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                    </span>
-                    Dashboard
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./form-elements.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                    <span class="nav-link-title">
+                      Home
                    </span>
-                    Form elements
                  </a>
                </li>
                <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="true" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      User Interface
                    </span>
-                    Base
                  </a>
-                  <ul class="dropdown-menu">
+                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
+                    <li >
+                      <a class="dropdown-item" href="./empty.html" >
+                        Empty page
+                      </a>
+                    </li>
                    <li >
                      <a class="dropdown-item" href="./blank.html" >
-                        Starter page
+                        Blank page
                      </a>
                    </li>
                    <li >
                      <a class="dropdown-item" href="./buttons.html" >
                        Buttons
-                        <span class="badge bg-green ml-auto">New</span>
                      </a>
                    </li>
                    <li >
@@ -146,14 +129,54 @@
                        Cards
                      </a>
                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./dropdowns.html" >
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./icons.html" >
+                        Icons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./modals.html" >
+                        Modals
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./maps.html" >
+                        Maps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./maps-vector.html" >
+                        Vector maps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./navigation.html" >
+                        Navigation
+                      </a>
+                    </li>
                    <li >
                      <a class="dropdown-item" href="./charts.html" >
                        Charts
                      </a>
                    </li>
                    <li >
-                      <a class="dropdown-item" href="./datatables.html" >
-                        Data Tables
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./tables.html" >
+                        Tables
                      </a>
                    </li>
                    <li >
@@ -171,26 +194,6 @@
                        Lists
                      </a>
                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./music.html" >
-                        Music
-                      </a>
-                    </li>
                    <li class="dropright">
                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                        Authentication
@@ -207,51 +210,29 @@
                        Error pages
                      </a>
                      <div class="dropdown-menu">
-                        <a href="./400.html" class="dropdown-item">400 page</a>
-                        <a href="./401.html" class="dropdown-item">401 page</a>
-                        <a href="./403.html" class="dropdown-item">403 page</a>
-                        <a href="./404.html" class="dropdown-item">404 page</a>
-                        <a href="./500.html" class="dropdown-item">500 page</a>
-                        <a href="./503.html" class="dropdown-item">503 page</a>
-                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                    </span>
-                    A
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        B
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./tmp.html" class="dropdown-item">C</a>
+                        <a href="./error-404.html" class="dropdown-item">404 page</a>
+                        <a href="./error-500.html" class="dropdown-item">500 page</a>
+                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
                      </div>
                    </li>
                  </ul>
                </li>
                <li class="nav-item">
-                  <a class="nav-link" href="./layouts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
                    </span>
-                    Layouts
                  </a>
                </li>
                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
                    </span>
-                    Extra
                  </a>
                  <ul class="dropdown-menu">
                    <li >
@@ -274,17 +255,113 @@
                        Search results
                      </a>
                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./pricing.html" >
+                        Pricing cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                  </ul>
                </li>
                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
                    </span>
-                    Documentation
                  </a>
                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./layout-horizontal.html" >
+                        Horizontal
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-vertical.html" >
+                        Vertical
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-vertical-right.html" >
+                        Right vertical
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-condensed.html" >
+                        Condensed
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-condensed-dark.html" >
+                        Condensed dark
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-combo.html" >
+                        Combined
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-dark.html" >
+                        Navbar dark
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-dark.html" >
+                        Dark mode
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-fluid.html" >
+                        Fluid
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-fluid-vertical.html" >
+                        Fluid vertical
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Docs
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
                    <li >
                      <a class="dropdown-item" href="./docs/index.html" >
                        Introduction
@@ -335,11 +412,6 @@
                        Colors
                      </a>
                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/countup.html" >
-                        Countup
-                      </a>
-                    </li>
                    <li >
                      <a class="dropdown-item" href="./docs/cursors.html" >
                        Cursors
@@ -350,6 +422,11 @@
                        Charts
                      </a>
                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/dropdowns.html" >
+                        Dropdowns
+                      </a>
+                    </li>
                    <li >
                      <a class="dropdown-item" href="./docs/divider.html" >
                        Divider
@@ -381,8 +458,8 @@
                      </a>
                    </li>
                    <li >
-                      <a class="dropdown-item" href="./docs/layout.html" >
-                        Layout
+                      <a class="dropdown-item" href="./docs/modals.html" >
+                        Modals
                      </a>
                    </li>
                    <li >
@@ -403,7 +480,6 @@
                    <li >
                      <a class="dropdown-item" href="./docs/ribbons.html" >
                        Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
                      </a>
                    </li>
                    <li >
@@ -449,11 +525,11 @@
                  </ul>
                </li>
              </ul>
-              <div class="d-none d-xl-block ml-auto">
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                <form action="." method="get">
                  <div class="input-icon">
                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
                    </span>
                    <input type="text" class="form-control" placeholder="Search…">
                  </div>
@@ -461,47 +537,167 @@
              </div>
            </div>
          </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
-            <!-- Page title -->
-            <div class="page-title-box">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <h2 class="page-title">
-                    Calendar
-                  </h2>
+        </div>
+      </div>
+      <div class="content">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Calendar
+                </h2>
+              </div>
+              <!-- Page title actions -->
+              <div class="col-auto ml-auto d-print-none">
+                <div class="d-flex">
+                  <a href="#" class="btn btn-primary">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
+                    Add event
+                  </a>
                </div>
-                <!-- Page title actions -->
-                <div class="col-auto ml-auto d-print-none">
-                  <div class="d-flex">
-                    <a href="#" class="btn btn-primary">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                      Add event
-                    </a>
+              </div>
+            </div>
+          </div>
+          <div class="card">
+            <div class="card-body">
+              <div id="calendar-main" class="card-calendar"></div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ml-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                Copyright © 2020
+                <a href="." class="link-secondary">Tabler</a>.
+                All rights reserved.
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true">
+      <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">New report</h5>
+            <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div class="mb-3">
+              <label class="form-label">Name</label>
+              <input type="text" class="form-control" name="example-text-input" placeholder="Your report name">
+            </div>
+            <label class="form-label">Report type</label>
+            <div class="form-selectgroup-boxes row mb-3">
+              <div class="col-lg-6">
+                <label class="form-selectgroup-item">
+                  <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked>
+                  <span class="form-selectgroup-label d-flex align-items-center p-3">
+                    <span class="mr-3">
+                      <span class="form-selectgroup-check"></span>
+                    </span>
+                    <span class="form-selectgroup-label-content">
+                      <span class="form-selectgroup-title strong mb-1">Simple</span>
+                      <span class="d-block text-muted">Provide only basic data needed for the report</span>
+                    </span>
+                  </span>
+                </label>
+              </div>
+              <div class="col-lg-6">
+                <label class="form-selectgroup-item">
+                  <input type="radio" name="report-type" value="1" class="form-selectgroup-input">
+                  <span class="form-selectgroup-label d-flex align-items-center p-3">
+                    <span class="mr-3">
+                      <span class="form-selectgroup-check"></span>
+                    </span>
+                    <span class="form-selectgroup-label-content">
+                      <span class="form-selectgroup-title strong mb-1">Advanced</span>
+                      <span class="d-block text-muted">Insert charts and additional advanced analyses to be inserted in the report</span>
+                    </span>
+                  </span>
+                </label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-lg-8">
+                <div class="mb-3">
+                  <label class="form-label">Report url</label>
+                  <div class="input-group input-group-flat">
+                    <span class="input-group-text">
+                      https://tabler.io/reports/
+                    </span>
+                    <input type="text" class="form-control pl-0"  value="report-01">
                  </div>
                </div>
              </div>
-            </div>
-            <div class="card">
-              <div class="card-body">
-                <div id="calendar-main" class="card-calendar"></div>
+              <div class="col-lg-4">
+                <div class="mb-3">
+                  <label class="form-label">Visibility</label>
+                  <select class="form-select">
+                    <option value="1" selected>Private</option>
+                    <option value="2">Public</option>
+                    <option value="3">Hidden</option>
+                  </select>
+                </div>
              </div>
            </div>
-          </main>
+          </div>
+          <div class="modal-body">
+            <div class="row">
+              <div class="col-lg-6">
+                <div class="mb-3">
+                  <label class="form-label">Client name</label>
+                  <input type="text" class="form-control">
+                </div>
+              </div>
+              <div class="col-lg-6">
+                <div class="mb-3">
+                  <label class="form-label">Reporting period</label>
+                  <input type="date" class="form-control">
+                </div>
+              </div>
+              <div class="col-lg-12">
+                <div>
+                  <label class="form-label">Additional information</label>
+                  <textarea class="form-control" rows="3"></textarea>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <a href="#" class="btn btn-link link-secondary" data-dismiss="modal">
+              Cancel
+            </a>
+            <a href="#" class="btn btn-primary ml-auto" data-dismiss="modal">
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
+              Create new report
+            </a>
+          </div>
        </div>
      </div>
    </div>
    <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <script src="./dist/libs/fullcalendar/core/main.min.js?1580339009"></script>
-    <script src="./dist/libs/fullcalendar/daygrid/main.min.js?1580339009"></script>
-    <script src="./dist/libs/fullcalendar/interaction/main.min.js?1580339009"></script>
-    <script src="./dist/libs/fullcalendar/timegrid/main.min.js?1580339009"></script>
-    <script src="./dist/libs/fullcalendar/list/main.min.js?1580339009"></script>
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="./dist/libs/fullcalendar/core/main.min.js"></script>
+    <script src="./dist/libs/fullcalendar/daygrid/main.min.js"></script>
+    <script src="./dist/libs/fullcalendar/interaction/main.min.js"></script>
+    <script src="./dist/libs/fullcalendar/timegrid/main.min.js"></script>
+    <script src="./dist/libs/fullcalendar/list/main.min.js"></script>
    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
+    <script src="./dist/js/tabler.min.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar-main'),
@@ -577,5 +773,8 @@
         })).render();
      });
    </script>
+    <script>
+      document.body.style.display = "block"
+    </script>
  </body>
 </html>
--- a/demo/cards-masonry.html
+++ b/demo/cards-masonry.html
@@ -0,0 +1,842 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.8
+* @link https://tabler.io
+* Copyright 2018-2020 The Tabler Authors
+* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Cards Masonry - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <header class="navbar navbar-expand-md navbar-light">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
+            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
+          </a>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item dropdown d-none d-md-flex mr-3">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                <span class="badge bg-red"></span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
+                  Separated link</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="./index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item active dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      User Interface
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
+                    <li >
+                      <a class="dropdown-item" href="./empty.html" >
+                        Empty page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./blank.html" >
+                        Blank page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item active" href="./cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./dropdowns.html" >
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./icons.html" >
+                        Icons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./modals.html" >
+                        Modals
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./maps.html" >
+                        Maps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./maps-vector.html" >
+                        Vector maps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./navigation.html" >
+                        Navigation
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./tables.html" >
+                        Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./error-404.html" class="dropdown-item">404 page</a>
+                        <a href="./error-500.html" class="dropdown-item">500 page</a>
+                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./invoice.html" >
+                        Invoice
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./blog.html" >
+                        Blog cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./search-results.html" >
+                        Search results
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./pricing.html" >
+                        Pricing cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./layout-horizontal.html" >
+                        Horizontal
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-vertical.html" >
+                        Vertical
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-vertical-right.html" >
+                        Right vertical
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-condensed.html" >
+                        Condensed
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-condensed-dark.html" >
+                        Condensed dark
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-combo.html" >
+                        Combined
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-dark.html" >
+                        Navbar dark
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-dark.html" >
+                        Dark mode
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-fluid.html" >
+                        Fluid
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-fluid-vertical.html" >
+                        Fluid vertical
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Docs
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
+                    <li >
+                      <a class="dropdown-item" href="./docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/dropdowns.html" >
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/divider.html" >
+                        Divider
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/empty.html" >
+                        Empty states
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/flags.html" >
+                        Flags
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/form-elements.html" >
+                        Form elements
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/form-helpers.html" >
+                        Form helpers
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/input-mask.html" >
+                        Form input mask
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/modals.html" >
+                        Modals
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/progress.html" >
+                        Progress
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/payments.html" >
+                        Payments
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/ribbons.html" >
+                        Ribbons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/spinners.html" >
+                        Spinners
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/steps.html" >
+                        Steps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/tables.html" >
+                        Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/timelines.html" >
+                        Timelines
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/toasts.html" >
+                        Toasts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/tooltips.html" >
+                        Tooltips
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Cards Masonry
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row" data-masonry='{"percentPosition": true }'>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <p>This is some text within a card body.</p>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <h3 class="card-title">Card with bottom image</h3>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+                <div class="card-img-bottom img-responsive img-responsive-16by9" style="background-image: url(./static/photos/56614e12b2a7bd68.jpg)"></div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+                <!-- Card footer -->
+                <div class="card-footer">
+                  <div class="row align-items-center">
+                    <div class="col-auto">
+                      <a href="#">More information</a>
+                    </div>
+                    <div class="col-auto ml-auto">
+                      <label class="form-check form-switch m-0">
+                        <input class="form-check-input position-static" type="checkbox" checked>
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+                <!-- Card footer -->
+                <div class="card-footer">
+                  <div class="row align-items-center">
+                    <div class="col-auto ml-auto">
+                      <div class="avatar-list avatar-list-stacked">
+                        <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                        <span class="avatar">JL</span>
+                        <span class="avatar" style="background-image: url(./static/avatars/002m.jpg)"></span>
+                        <span class="avatar" style="background-image: url(./static/avatars/003m.jpg)"></span>
+                        <span class="avatar" style="background-image: url(./static/avatars/000f.jpg)"></span>
+                        <span class="avatar">+3</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-header">
+                  <ul class="nav nav-tabs card-header-tabs">
+                    <li class="nav-item">
+                      <a class="nav-link active" href="#">
+                        Active
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link" href="#">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                        Link
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
+                        Disabled
+                      </a>
+                    </li>
+                    <li class="nav-item ml-auto">
+                      <a class="nav-link" href="#">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div class="card-body">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-header">
+                  <ul class="nav nav-pills card-header-pills">
+                    <li class="nav-item">
+                      <a class="nav-link active" href="#">
+                        Active
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link" href="#">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                        Link
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
+                        Disabled
+                      </a>
+                    </li>
+                    <li class="nav-item ml-auto">
+                      <a class="nav-link" href="#">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div class="card-body">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="empty">
+                  <div class="empty-icon">
+                    <img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128" class="mb-4"  alt="">
+                  </div>
+                  <p class="empty-title h3">No results found</p>
+                  <p class="empty-subtitle text-muted">
+                    Try adjusting your search or filter to find what you're looking for.
+                  </p>
+                  <div class="empty-action">
+                    <a href="./." class="btn btn-primary">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                      Search again
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <h3 class="card-title">Card with progress bar</h3>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+                <div class="progress progress-sm card-progress">
+                  <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
+                    <span class="visually-hidden">38% Complete</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <h3 class="card-title">Card title</h3>
+                  <div class="card-subtitle">Card subtitle</div>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-header">
+                  <h3 class="card-title">Header title</h3>
+                </div>
+                <div class="card-body">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <div class="mb-3">
+                    <div class="form-label">Card number</div>
+                    <input type="text" name="input-mask" class="form-control" data-mask="0000 0000 0000 0000" data-mask-visible="true" autocomplete="off"/>
+                  </div>
+                  <div class="mb-3">
+                    <div class="form-label">Card name</div>
+                    <input type="text" class="form-control">
+                  </div>
+                  <div class="row">
+                    <div class="col-8">
+                      <div class="mb-3">
+                        <label class="form-label">Expiration date</label>
+                        <div class="row row-sm">
+                          <div class="col">
+                            <select class="form-select">
+                              <option value="1">1</option>
+                              <option value="2">2</option>
+                              <option value="3">3</option>
+                              <option value="4">4</option>
+                              <option value="5">5</option>
+                              <option value="6">6</option>
+                              <option value="7">7</option>
+                              <option value="8">8</option>
+                              <option value="9">9</option>
+                              <option value="10">10</option>
+                              <option value="11">11</option>
+                              <option value="12">12</option>
+                            </select>
+                          </div>
+                          <div class="col">
+                            <select class="form-select">
+                              <option value="2020">2020</option>
+                              <option value="2021">2021</option>
+                              <option value="2022">2022</option>
+                              <option value="2023">2023</option>
+                              <option value="2024">2024</option>
+                              <option value="2025">2025</option>
+                              <option value="2026">2026</option>
+                              <option value="2027">2027</option>
+                              <option value="2028">2028</option>
+                              <option value="2029">2029</option>
+                              <option value="2030">2030</option>
+                            </select>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col">
+                      <div class="mb-3">
+                        <div class="form-label">CVV</div>
+                        <input type="number" class="form-control">
+                      </div>
+                    </div>
+                  </div>
+                  <div class="mt-2">
+                    <a href="#" class="btn btn-primary btn-block">
+                      Pay now
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ml-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                Copyright © 2020
+                <a href="." class="link-secondary">Tabler</a>.
+                All rights reserved.
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js"></script>
+    <script>
+      (function () {
+      	/**
+      	 * Input mask
+      	 */
+      	var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
+      	maskElementList.map(function (maskEl) {
+      		return new IMask(maskEl, {
+      			mask: maskEl.dataset.mask,
+      			lazy: maskEl.dataset['mask-visible'] === 'true'
+      		})
+      	});
+      })();
+    </script>
+    <script>
+      document.body.style.display = "block"
+    </script>
+  </body>
+</html>
--- a/demo/cards.html
+++ b/demo/cards.html
--- a/demo/carousel.html
+++ b/demo/carousel.html
@@ -1,17 +1,19 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* @version 1.0.0-alpha.8
+* @link https://tabler.io
+* Copyright 2018-2020 The Tabler Authors
+* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Carousel - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <meta name="msapplication-TileColor" content="#206bc4"/>
    <meta name="theme-color" content="#206bc4"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -22,123 +24,100 @@
    <meta name="robots" content="noindex,nofollow,noarchive"/>
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Carousel - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
  </head>
  <body class="antialiased">
    <div class="page">
-      <div class="content">
-        <header class="navbar-wrap navbar-expand-lg flex-column">
-          <div class="navbar navbar-border navbar-light bg-white">
-            <div class="container">
-              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <a href="." class="navbar-brand hide-sidebar-visible m-0">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+      <header class="navbar navbar-expand-md navbar-light">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
+            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
+          </a>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item dropdown d-none d-md-flex mr-3">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                <span class="badge bg-red"></span>
              </a>
-              <ul class="nav navbar-menu align-items-center ml-auto">
-                <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-                    </svg>
-                    Source code
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block lh-1">
-                      Leesa Beaty
-                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                    </span>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      Profile
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                      Settings
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                      Inbox
-                      <span class="badge bg-primary ml-auto">6</span>
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                      Message
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-                      Need help?
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                      Sign out
-                    </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
                  </div>
-                </li>
-              </ul>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
+                  Separated link</a>
+              </div>
            </div>
          </div>
-          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
-            <div class="container">
-              <ul class="navbar-nav flex-wrap flex-fill">
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
                <li class="nav-item">
                  <a class="nav-link" href="./index.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                    </span>
-                    Dashboard
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./form-elements.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                    <span class="nav-link-title">
+                      Home
                    </span>
-                    Form elements
                  </a>
                </li>
                <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="true" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      User Interface
                    </span>
-                    Base
                  </a>
-                  <ul class="dropdown-menu">
+                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
+                    <li >
+                      <a class="dropdown-item" href="./empty.html" >
+                        Empty page
+                      </a>
+                    </li>
                    <li >
                      <a class="dropdown-item" href="./blank.html" >
-                        Starter page
+                        Blank page
                      </a>
                    </li>
                    <li >
                      <a class="dropdown-item" href="./buttons.html" >
                        Buttons
-                        <span class="badge bg-green ml-auto">New</span>
                      </a>
                    </li>
                    <li >
@@ -146,14 +125,54 @@
                        Cards
                      </a>
                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./dropdowns.html" >
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./icons.html" >
+                        Icons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./modals.html" >
+                        Modals
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./maps.html" >
+                        Maps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./maps-vector.html" >
+                        Vector maps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./navigation.html" >
+                        Navigation
+                      </a>
+                    </li>
                    <li >
                      <a class="dropdown-item" href="./charts.html" >
                        Charts
                      </a>
                    </li>
                    <li >
-                      <a class="dropdown-item" href="./datatables.html" >
-                        Data Tables
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./tables.html" >
+                        Tables
                      </a>
                    </li>
                    <li >
@@ -171,26 +190,6 @@
                        Lists
                      </a>
                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./music.html" >
-                        Music
-                      </a>
-                    </li>
                    <li class="dropright">
                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                        Authentication
@@ -207,51 +206,29 @@
                        Error pages
                      </a>
                      <div class="dropdown-menu">
-                        <a href="./400.html" class="dropdown-item">400 page</a>
-                        <a href="./401.html" class="dropdown-item">401 page</a>
-                        <a href="./403.html" class="dropdown-item">403 page</a>
-                        <a href="./404.html" class="dropdown-item">404 page</a>
-                        <a href="./500.html" class="dropdown-item">500 page</a>
-                        <a href="./503.html" class="dropdown-item">503 page</a>
-                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                    </span>
-                    A
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        B
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./tmp.html" class="dropdown-item">C</a>
+                        <a href="./error-404.html" class="dropdown-item">404 page</a>
+                        <a href="./error-500.html" class="dropdown-item">500 page</a>
+                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
                      </div>
                    </li>
                  </ul>
                </li>
                <li class="nav-item">
-                  <a class="nav-link" href="./layouts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
                    </span>
-                    Layouts
                  </a>
                </li>
                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
                    </span>
-                    Extra
                  </a>
                  <ul class="dropdown-menu">
                    <li >
@@ -274,17 +251,113 @@
                        Search results
                      </a>
                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./pricing.html" >
+                        Pricing cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                  </ul>
                </li>
                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
                    </span>
-                    Documentation
                  </a>
                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./layout-horizontal.html" >
+                        Horizontal
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-vertical.html" >
+                        Vertical
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-vertical-right.html" >
+                        Right vertical
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-condensed.html" >
+                        Condensed
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-condensed-dark.html" >
+                        Condensed dark
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-combo.html" >
+                        Combined
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-dark.html" >
+                        Navbar dark
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-dark.html" >
+                        Dark mode
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-fluid.html" >
+                        Fluid
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-fluid-vertical.html" >
+                        Fluid vertical
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Docs
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
                    <li >
                      <a class="dropdown-item" href="./docs/index.html" >
                        Introduction
@@ -335,11 +408,6 @@
                        Colors
                      </a>
                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/countup.html" >
-                        Countup
-                      </a>
-                    </li>
                    <li >
                      <a class="dropdown-item" href="./docs/cursors.html" >
                        Cursors
@@ -350,6 +418,11 @@
                        Charts
                      </a>
                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/dropdowns.html" >
+                        Dropdowns
+                      </a>
+                    </li>
                    <li >
                      <a class="dropdown-item" href="./docs/divider.html" >
                        Divider
@@ -381,8 +454,8 @@
                      </a>
                    </li>
                    <li >
-                      <a class="dropdown-item" href="./docs/layout.html" >
-                        Layout
+                      <a class="dropdown-item" href="./docs/modals.html" >
+                        Modals
                      </a>
                    </li>
                    <li >
@@ -403,7 +476,6 @@
                    <li >
                      <a class="dropdown-item" href="./docs/ribbons.html" >
                        Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
                      </a>
                    </li>
                    <li >
@@ -449,11 +521,11 @@
                  </ul>
                </li>
              </ul>
-              <div class="d-none d-xl-block ml-auto">
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                <form action="." method="get">
                  <div class="input-icon">
                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
                    </span>
                    <input type="text" class="form-control" placeholder="Search…">
                  </div>
@@ -461,189 +533,209 @@
              </div>
            </div>
          </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
-            <!-- Page title -->
-            <div class="page-title-box">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <h2 class="page-title">
-                    Carousel
-                  </h2>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-md-6">
-                <div class="card">
-                  <div class="card-header">
-                    <h3 class="card-title">Carousel</h3>
-                  </div>
-                  <div class="card-body">
-                    <div id="carousel-default" class="carousel slide" data-ride="carousel">
-                      <div class="carousel-inner">
-                        <div class="carousel-item active">
-                          <img class="d-block w-100" alt="" src="./static/photos/1b73704b282a8ec6.jpg" data-holder-rendered="true">
-                        </div>
-                        <div class="carousel-item">
-                          <img class="d-block w-100" alt="" src="./static/photos/3d2998219313cd37.jpg" data-holder-rendered="true">
-                        </div>
-                        <div class="carousel-item">
-                          <img class="d-block w-100" alt="" src="./static/photos/6ab3200b14549f8a.jpg" data-holder-rendered="true">
-                        </div>
-                        <div class="carousel-item">
-                          <img class="d-block w-100" alt="" src="./static/photos/6d35d9a2bd6c63c2.jpg" data-holder-rendered="true">
-                        </div>
-                        <div class="carousel-item">
-                          <img class="d-block w-100" alt="" src="./static/photos/8a26974ee6444acd.jpg" data-holder-rendered="true">
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-md-6">
-                <div class="card">
-                  <div class="card-header">
-                    <h3 class="card-title">Carousel with indicators</h3>
-                  </div>
-                  <div class="card-body">
-                    <div id="carousel-indicators" class="carousel slide" data-ride="carousel">
-                      <ol class="carousel-indicators">
-                        <li data-target="#carousel-indicators" data-slide-to="0" class="active"></li>
-                        <li data-target="#carousel-indicators" data-slide-to="1" class=""></li>
-                        <li data-target="#carousel-indicators" data-slide-to="2" class=""></li>
-                        <li data-target="#carousel-indicators" data-slide-to="3" class=""></li>
-                        <li data-target="#carousel-indicators" data-slide-to="4" class=""></li>
-                      </ol>
-                      <div class="carousel-inner">
-                        <div class="carousel-item active">
-                          <img class="d-block w-100" alt="" src="./static/photos/8c13ad59f739558c.jpg" data-holder-rendered="true">
-                        </div>
-                        <div class="carousel-item">
-                          <img class="d-block w-100" alt="" src="./static/photos/8fdeb4785d2b82ef.jpg" data-holder-rendered="true">
-                        </div>
-                        <div class="carousel-item">
-                          <img class="d-block w-100" alt="" src="./static/photos/9f36332564ca271d.jpg" data-holder-rendered="true">
-                        </div>
-                        <div class="carousel-item">
-                          <img class="d-block w-100" alt="" src="./static/photos/35b88fc04a518c1b.jpg" data-holder-rendered="true">
-                        </div>
-                        <div class="carousel-item">
-                          <img class="d-block w-100" alt="" src="./static/photos/36e273986ed577b8.jpg" data-holder-rendered="true">
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-md-6">
-                <div class="card">
-                  <div class="card-header">
-                    <h3 class="card-title">Carousel with controls</h3>
-                  </div>
-                  <div class="card-body">
-                    <div id="carousel-controls" class="carousel slide" data-ride="carousel">
-                      <div class="carousel-inner">
-                        <div class="carousel-item active">
-                          <img class="d-block w-100" alt="" src="./static/photos/75b555b99d5b38c4.jpg" data-holder-rendered="true">
-                        </div>
-                        <div class="carousel-item">
-                          <img class="d-block w-100" alt="" src="./static/photos/546fd146c83f428c.jpg" data-holder-rendered="true">
-                        </div>
-                        <div class="carousel-item">
-                          <img class="d-block w-100" alt="" src="./static/photos/802a16cdf5ce3551.jpg" data-holder-rendered="true">
-                        </div>
-                        <div class="carousel-item">
-                          <img class="d-block w-100" alt="" src="./static/photos/0986f97be719fb9a.jpg" data-holder-rendered="true">
-                        </div>
-                        <div class="carousel-item">
-                          <img class="d-block w-100" alt="" src="./static/photos/1194d63fe36a8670.jpg" data-holder-rendered="true">
-                        </div>
-                      </div>
-                      <a class="carousel-control-prev" href="#carousel-controls" 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="#carousel-controls" 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-md-6">
-                <div class="card">
-                  <div class="card-header">
-                    <h3 class="card-title">Carousel with captions</h3>
-                  </div>
-                  <div class="card-body">
-                    <div id="carousel-captions" class="carousel slide" data-ride="carousel">
-                      <div class="carousel-inner">
-                        <div class="carousel-item active">
-                          <img class="d-block w-100" alt="" src="./static/photos/1366fdc9b9b277e4.jpg" data-holder-rendered="true">
-                          <div class="carousel-item-background d-none d-md-block"></div>
-                          <div class="carousel-caption d-none d-md-block">
-                            <h3>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" alt="" src="./static/photos/5358d787242861c4.jpg" data-holder-rendered="true">
-                          <div class="carousel-item-background d-none d-md-block"></div>
-                          <div class="carousel-caption d-none d-md-block">
-                            <h3>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" alt="" src="./static/photos/5614ec7eb9034d04.jpg" data-holder-rendered="true">
-                          <div class="carousel-item-background d-none d-md-block"></div>
-                          <div class="carousel-caption d-none d-md-block">
-                            <h3>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" alt="" src="./static/photos/56614e12b2a7bd68.jpg" data-holder-rendered="true">
-                          <div class="carousel-item-background d-none d-md-block"></div>
-                          <div class="carousel-caption d-none d-md-block">
-                            <h3>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" alt="" src="./static/photos/77586f6ffa9fbc5e.jpg" data-holder-rendered="true">
-                          <div class="carousel-item-background d-none d-md-block"></div>
-                          <div class="carousel-caption d-none d-md-block">
-                            <h3>Slide label</h3>
-                            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
-                          </div>
-                        </div>
-                      </div>
-                      <a class="carousel-control-prev" href="#carousel-captions" 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="#carousel-captions" 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>
-          </main>
        </div>
      </div>
+      <div class="content">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Carousel
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-6">
+              <div class="card">
+                <div class="card-header">
+                  <h3 class="card-title">Carousel</h3>
+                </div>
+                <div class="card-body">
+                  <div id="carousel-default" class="carousel slide" data-ride="carousel">
+                    <div class="carousel-inner">
+                      <div class="carousel-item active">
+                        <img class="d-block w-100" alt="" src="./static/photos/1b73704b282a8ec6.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/3d2998219313cd37.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/6ab3200b14549f8a.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/6d35d9a2bd6c63c2.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/8a26974ee6444acd.jpg" data-holder-rendered="true">
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6">
+              <div class="card">
+                <div class="card-header">
+                  <h3 class="card-title">Carousel with indicators</h3>
+                </div>
+                <div class="card-body">
+                  <div id="carousel-indicators" class="carousel slide" data-ride="carousel">
+                    <ol class="carousel-indicators">
+                      <li data-target="#carousel-indicators" data-slide-to="0" class="active"></li>
+                      <li data-target="#carousel-indicators" data-slide-to="1" class=""></li>
+                      <li data-target="#carousel-indicators" data-slide-to="2" class=""></li>
+                      <li data-target="#carousel-indicators" data-slide-to="3" class=""></li>
+                      <li data-target="#carousel-indicators" data-slide-to="4" class=""></li>
+                    </ol>
+                    <div class="carousel-inner">
+                      <div class="carousel-item active">
+                        <img class="d-block w-100" alt="" src="./static/photos/8c13ad59f739558c.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/8fdeb4785d2b82ef.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/9f36332564ca271d.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/35b88fc04a518c1b.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/36e273986ed577b8.jpg" data-holder-rendered="true">
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6">
+              <div class="card">
+                <div class="card-header">
+                  <h3 class="card-title">Carousel with controls</h3>
+                </div>
+                <div class="card-body">
+                  <div id="carousel-controls" class="carousel slide" data-ride="carousel">
+                    <div class="carousel-inner">
+                      <div class="carousel-item active">
+                        <img class="d-block w-100" alt="" src="./static/photos/75b555b99d5b38c4.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/546fd146c83f428c.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/802a16cdf5ce3551.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/0986f97be719fb9a.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/1194d63fe36a8670.jpg" data-holder-rendered="true">
+                      </div>
+                    </div>
+                    <a class="carousel-control-prev" href="#carousel-controls" role="button" data-slide="prev">
+                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                      <span class="visually-hidden">Previous</span>
+                    </a>
+                    <a class="carousel-control-next" href="#carousel-controls" role="button" data-slide="next">
+                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                      <span class="visually-hidden">Next</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6">
+              <div class="card">
+                <div class="card-header">
+                  <h3 class="card-title">Carousel with captions</h3>
+                </div>
+                <div class="card-body">
+                  <div id="carousel-captions" class="carousel slide" data-ride="carousel">
+                    <div class="carousel-inner">
+                      <div class="carousel-item active">
+                        <img class="d-block w-100" alt="" src="./static/photos/1366fdc9b9b277e4.jpg" data-holder-rendered="true">
+                        <div class="carousel-item-background d-none d-md-block"></div>
+                        <div class="carousel-caption d-none d-md-block">
+                          <h3>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" alt="" src="./static/photos/5358d787242861c4.jpg" data-holder-rendered="true">
+                        <div class="carousel-item-background d-none d-md-block"></div>
+                        <div class="carousel-caption d-none d-md-block">
+                          <h3>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" alt="" src="./static/photos/5614ec7eb9034d04.jpg" data-holder-rendered="true">
+                        <div class="carousel-item-background d-none d-md-block"></div>
+                        <div class="carousel-caption d-none d-md-block">
+                          <h3>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" alt="" src="./static/photos/56614e12b2a7bd68.jpg" data-holder-rendered="true">
+                        <div class="carousel-item-background d-none d-md-block"></div>
+                        <div class="carousel-caption d-none d-md-block">
+                          <h3>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" alt="" src="./static/photos/77586f6ffa9fbc5e.jpg" data-holder-rendered="true">
+                        <div class="carousel-item-background d-none d-md-block"></div>
+                        <div class="carousel-caption d-none d-md-block">
+                          <h3>Slide label</h3>
+                          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+                        </div>
+                      </div>
+                    </div>
+                    <a class="carousel-control-prev" href="#carousel-captions" role="button" data-slide="prev">
+                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                      <span class="visually-hidden">Previous</span>
+                    </a>
+                    <a class="carousel-control-next" href="#carousel-captions" role="button" data-slide="next">
+                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                      <span class="visually-hidden">Next</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ml-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                Copyright © 2020
+                <a href="." class="link-secondary">Tabler</a>.
+                All rights reserved.
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
    </div>
    <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
+    <script src="./dist/js/tabler.min.js"></script>
+    <script>
+      document.body.style.display = "block"
+    </script>
  </body>
 </html>
--- a/demo/changelog.html
+++ b/demo/changelog.html
@@ -1,17 +1,19 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* @version 1.0.0-alpha.8
+* @link https://tabler.io
+* Copyright 2018-2020 The Tabler Authors
+* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Changelog - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <meta name="msapplication-TileColor" content="#206bc4"/>
    <meta name="theme-color" content="#206bc4"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -22,123 +24,100 @@
    <meta name="robots" content="noindex,nofollow,noarchive"/>
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Changelog - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
  </head>
  <body class="antialiased">
    <div class="page">
-      <div class="content">
-        <header class="navbar-wrap navbar-expand-lg flex-column">
-          <div class="navbar navbar-border navbar-light bg-white">
-            <div class="container">
-              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <a href="." class="navbar-brand hide-sidebar-visible m-0">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+      <header class="navbar navbar-expand-md navbar-light">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
+            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
+          </a>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item dropdown d-none d-md-flex mr-3">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                <span class="badge bg-red"></span>
              </a>
-              <ul class="nav navbar-menu align-items-center ml-auto">
-                <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-                    </svg>
-                    Source code
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block lh-1">
-                      Leesa Beaty
-                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                    </span>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      Profile
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                      Settings
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                      Inbox
-                      <span class="badge bg-primary ml-auto">6</span>
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                      Message
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-                      Need help?
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                      Sign out
-                    </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
                  </div>
-                </li>
-              </ul>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
+                  Separated link</a>
+              </div>
            </div>
          </div>
-          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
-            <div class="container">
-              <ul class="navbar-nav flex-wrap flex-fill">
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
                <li class="nav-item">
                  <a class="nav-link" href="./index.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                    </span>
-                    Dashboard
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./form-elements.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                    <span class="nav-link-title">
+                      Home
                    </span>
-                    Form elements
                  </a>
                </li>
                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      User Interface
                    </span>
-                    Base
                  </a>
-                  <ul class="dropdown-menu">
+                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
+                    <li >
+                      <a class="dropdown-item" href="./empty.html" >
+                        Empty page
+                      </a>
+                    </li>
                    <li >
                      <a class="dropdown-item" href="./blank.html" >
-                        Starter page
+                        Blank page
                      </a>
                    </li>
                    <li >
                      <a class="dropdown-item" href="./buttons.html" >
                        Buttons
-                        <span class="badge bg-green ml-auto">New</span>
                      </a>
                    </li>
                    <li >
@@ -146,14 +125,54 @@
                        Cards
                      </a>
                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./dropdowns.html" >
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./icons.html" >
+                        Icons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./modals.html" >
+                        Modals
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./maps.html" >
+                        Maps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./maps-vector.html" >
+                        Vector maps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./navigation.html" >
+                        Navigation
+                      </a>
+                    </li>
                    <li >
                      <a class="dropdown-item" href="./charts.html" >
                        Charts
                      </a>
                    </li>
                    <li >
-                      <a class="dropdown-item" href="./datatables.html" >
-                        Data Tables
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./tables.html" >
+                        Tables
                      </a>
                    </li>
                    <li >
@@ -171,26 +190,6 @@
                        Lists
                      </a>
                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./music.html" >
-                        Music
-                      </a>
-                    </li>
                    <li class="dropright">
                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                        Authentication
@@ -207,51 +206,29 @@
                        Error pages
                      </a>
                      <div class="dropdown-menu">
-                        <a href="./400.html" class="dropdown-item">400 page</a>
-                        <a href="./401.html" class="dropdown-item">401 page</a>
-                        <a href="./403.html" class="dropdown-item">403 page</a>
-                        <a href="./404.html" class="dropdown-item">404 page</a>
-                        <a href="./500.html" class="dropdown-item">500 page</a>
-                        <a href="./503.html" class="dropdown-item">503 page</a>
-                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                    </span>
-                    A
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        B
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./tmp.html" class="dropdown-item">C</a>
+                        <a href="./error-404.html" class="dropdown-item">404 page</a>
+                        <a href="./error-500.html" class="dropdown-item">500 page</a>
+                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
                      </div>
                    </li>
                  </ul>
                </li>
                <li class="nav-item">
-                  <a class="nav-link" href="./layouts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
                    </span>
-                    Layouts
                  </a>
                </li>
                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
                    </span>
-                    Extra
                  </a>
                  <ul class="dropdown-menu">
                    <li >
@@ -274,17 +251,113 @@
                        Search results
                      </a>
                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./pricing.html" >
+                        Pricing cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                  </ul>
                </li>
                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
                    </span>
-                    Documentation
                  </a>
                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./layout-horizontal.html" >
+                        Horizontal
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-vertical.html" >
+                        Vertical
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-vertical-right.html" >
+                        Right vertical
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-condensed.html" >
+                        Condensed
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-condensed-dark.html" >
+                        Condensed dark
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-combo.html" >
+                        Combined
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-dark.html" >
+                        Navbar dark
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-dark.html" >
+                        Dark mode
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-fluid.html" >
+                        Fluid
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-fluid-vertical.html" >
+                        Fluid vertical
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Docs
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
                    <li >
                      <a class="dropdown-item" href="./docs/index.html" >
                        Introduction
@@ -335,11 +408,6 @@
                        Colors
                      </a>
                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/countup.html" >
-                        Countup
-                      </a>
-                    </li>
                    <li >
                      <a class="dropdown-item" href="./docs/cursors.html" >
                        Cursors
@@ -350,6 +418,11 @@
                        Charts
                      </a>
                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/dropdowns.html" >
+                        Dropdowns
+                      </a>
+                    </li>
                    <li >
                      <a class="dropdown-item" href="./docs/divider.html" >
                        Divider
@@ -381,8 +454,8 @@
                      </a>
                    </li>
                    <li >
-                      <a class="dropdown-item" href="./docs/layout.html" >
-                        Layout
+                      <a class="dropdown-item" href="./docs/modals.html" >
+                        Modals
                      </a>
                    </li>
                    <li >
@@ -403,7 +476,6 @@
                    <li >
                      <a class="dropdown-item" href="./docs/ribbons.html" >
                        Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
                      </a>
                    </li>
                    <li >
@@ -449,11 +521,11 @@
                  </ul>
                </li>
              </ul>
-              <div class="d-none d-xl-block ml-auto">
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                <form action="." method="get">
                  <div class="input-icon">
                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
                    </span>
                    <input type="text" class="form-control" placeholder="Search…">
                  </div>
@@ -461,40 +533,51 @@
              </div>
            </div>
          </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
-            <!-- Page title -->
-            <div class="page-title-box">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <h2 class="page-title">
-                    Changelog
-                  </h2>
-                </div>
-              </div>
-            </div>
-            <div class="card">
-              <div class="card-body markdown p-5">
-                <div class="mb-4">
-                  <div class="mb-2">
-                    <span class="badge bg-blue-lt">1.0.0</span> —
-                    <span class="text-muted">January 30, 2020</span>
-                  </div>
-                  <div>
-                    <p>Coming soon</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </main>
        </div>
      </div>
+      <div class="content">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Changelog
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="card card-lg">
+            <div class="card-body markdown">
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ml-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                Copyright © 2020
+                <a href="." class="link-secondary">Tabler</a>.
+                All rights reserved.
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
    </div>
    <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
+    <script src="./dist/js/tabler.min.js"></script>
+    <script>
+      document.body.style.display = "block"
+    </script>
  </body>
 </html>
--- a/demo/charts-heatmap.html
+++ b/demo/charts-heatmap.html
--- a/demo/charts.html
+++ b/demo/charts.html
--- a/demo/components.html
+++ b/demo/components.html
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <meta charset="utf-8">
-  <title>Redirecting…</title>
-  <link rel="canonical" href="./components/card-buttons.html">
-  <meta http-equiv="refresh" content="0; url=./components/card-buttons.html">
-  <meta name="robots" content="noindex">
-  <noscript><a href="./components/card-buttons.html">Click here if you are not redirected.</a></noscript>
-  <script>
-    location="./components/card-buttons.html";
-  </script>
-</html>
--- a/demo/components/card-buttons.html
+++ b/demo/components/card-buttons.html
@@ -1,592 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Card with footer buttons - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
-    <meta name="twitter:site" content="@tabler_ui">
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
-    <meta property="og:image:width" content="1280">
-    <meta property="og:image:height" content="640">
-    <meta property="og:site_name" content="Tabler">
-    <meta property="og:type" content="object">
-    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
-    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <div class="content">
-        <header class="navbar-wrap navbar-expand-lg flex-column">
-          <div class="navbar navbar-border navbar-light bg-white">
-            <div class="container">
-              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
-                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
-              </a>
-              <ul class="nav navbar-menu align-items-center ml-auto">
-                <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-                    </svg>
-                    Source code
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block lh-1">
-                      Leesa Beaty
-                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                    </span>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      Profile
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                      Settings
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                      Inbox
-                      <span class="badge bg-primary ml-auto">6</span>
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                      Message
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-                      Need help?
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                      Sign out
-                    </a>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
-            <div class="container">
-              <ul class="navbar-nav flex-wrap flex-fill">
-                <li class="nav-item">
-                  <a class="nav-link" href="../index.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                    </span>
-                    Dashboard
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../form-elements.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                    </span>
-                    Form elements
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                    </span>
-                    Base
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../blank.html" >
-                        Starter page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../buttons.html" >
-                        Buttons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../datatables.html" >
-                        Data Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../400.html" class="dropdown-item">400 page</a>
-                        <a href="../401.html" class="dropdown-item">401 page</a>
-                        <a href="../403.html" class="dropdown-item">403 page</a>
-                        <a href="../404.html" class="dropdown-item">404 page</a>
-                        <a href="../500.html" class="dropdown-item">500 page</a>
-                        <a href="../503.html" class="dropdown-item">503 page</a>
-                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                    </span>
-                    A
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        B
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../tmp.html" class="dropdown-item">C</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../layouts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                    </span>
-                    Layouts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                    </span>
-                    Extra
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                    </span>
-                    Documentation
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/countup.html" >
-                        Countup
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/layout.html" >
-                        Layout
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/ribbons.html" >
-                        Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="d-none d-xl-block ml-auto">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
-            <!-- Page title -->
-            <div class="page-title-box">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <h2 class="page-title">
-                    Tabler components
-                  </h2>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-lg-3">
-                <div class="list-group list-group-transparent mb-0">
-                  <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                  <a href="/components/card-buttons.html" class="list-group-item list-group-item-action active">Card with footer buttons</a>
-                  <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                  <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                  <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                  <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                  <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                  <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                  <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                  <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                  <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                  <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                  <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-                </div>
-              </div>
-              <div class="col-lg-9">
-                <div class="card">
-                  <div class="card-body p-6">
-                    <div class="card-title">Card with footer buttons</div>
-                    <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                    <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                      <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                        <div class="flex-fill" style="max-width: 572px">
-                          <div class="card">
-                            <div class="card-body">
-                              <h3 class="card-title">Card with footer buttons</h3>
-                              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                                neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                            </div>
-                            <!-- Card footer -->
-                            <div class="card-footer">
-                              <div class="d-flex">
-                                <a href="#" class="btn btn-link">Cancel</a>
-                                <a href="#" class="btn btn-primary ml-auto">Go somewhere</a>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card with footer buttons<span class="nt">&lt;/h3&gt;</span>
-      <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-         neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="c">&lt;!-- Card footer --&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
-         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary ml-auto"</span><span class="nt">&gt;</span>Go somewhere<span class="nt">&lt;/a&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                    </div>
-                    <div class="row">
-                      <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                          Copy code
-                        </a>
-                      </div>
-                      <div class="col">
-                        <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                          <input type="hidden" name="data" value='{"title":"Card with footer buttons","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
-                          <div class=\"card\">\n      
-                            <div class=\"card-body\">\n         
-                              <h3 class=\"card-title\">Card with footer buttons</h3>
-                              \n         
-                              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima\n            neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                              \n      </div>
-                            \n      <!-- Card footer -->\n      
-                            <div class=\"card-footer\">\n         
-                              <div class=\"d-flex\">\n            <a href=\"#\" class=\"btn btn-link\">Cancel</a>\n            <a href=\"#\" class=\"btn btn-primary ml-auto\">Go somewhere</a>\n         </div>
-                              \n      </div>
-                            \n</div>
-                          \n\n\n</div>
-                        \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                        <button type="submit" class="btn btn-primary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                          Edit in CodePen
-                        </button>
-                      </form>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-</body>
-</html>
--- a/demo/components/card-comments.html
+++ b/demo/components/card-comments.html
@@ -1,802 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Comments card - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-comments.png">
-    <meta name="twitter:site" content="@tabler_ui">
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-comments.png">
-    <meta property="og:image:width" content="1280">
-    <meta property="og:image:height" content="640">
-    <meta property="og:site_name" content="Tabler">
-    <meta property="og:type" content="object">
-    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-comments.html">
-    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <div class="content">
-        <header class="navbar-wrap navbar-expand-lg flex-column">
-          <div class="navbar navbar-border navbar-light bg-white">
-            <div class="container">
-              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
-                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
-              </a>
-              <ul class="nav navbar-menu align-items-center ml-auto">
-                <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-                    </svg>
-                    Source code
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block lh-1">
-                      Leesa Beaty
-                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                    </span>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      Profile
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                      Settings
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                      Inbox
-                      <span class="badge bg-primary ml-auto">6</span>
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                      Message
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-                      Need help?
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                      Sign out
-                    </a>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
-            <div class="container">
-              <ul class="navbar-nav flex-wrap flex-fill">
-                <li class="nav-item">
-                  <a class="nav-link" href="../index.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                    </span>
-                    Dashboard
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../form-elements.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                    </span>
-                    Form elements
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                    </span>
-                    Base
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../blank.html" >
-                        Starter page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../buttons.html" >
-                        Buttons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../datatables.html" >
-                        Data Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../400.html" class="dropdown-item">400 page</a>
-                        <a href="../401.html" class="dropdown-item">401 page</a>
-                        <a href="../403.html" class="dropdown-item">403 page</a>
-                        <a href="../404.html" class="dropdown-item">404 page</a>
-                        <a href="../500.html" class="dropdown-item">500 page</a>
-                        <a href="../503.html" class="dropdown-item">503 page</a>
-                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                    </span>
-                    A
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        B
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../tmp.html" class="dropdown-item">C</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../layouts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                    </span>
-                    Layouts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                    </span>
-                    Extra
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                    </span>
-                    Documentation
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/countup.html" >
-                        Countup
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/layout.html" >
-                        Layout
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/ribbons.html" >
-                        Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="d-none d-xl-block ml-auto">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
-            <!-- Page title -->
-            <div class="page-title-box">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <h2 class="page-title">
-                    Tabler components
-                  </h2>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-lg-3">
-                <div class="list-group list-group-transparent mb-0">
-                  <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                  <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                  <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                  <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                  <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                  <a href="/components/card-comments.html" class="list-group-item list-group-item-action active">Comments card</a>
-                  <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                  <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                  <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                  <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                  <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                  <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                  <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-                </div>
-              </div>
-              <div class="col-lg-9">
-                <div class="card">
-                  <div class="card-body p-6">
-                    <div class="card-title">Comments card</div>
-                    <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                    <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                      <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                        <div class="flex-fill" style="max-width: 572px">
-                          <div class="card">
-                            <div class="card-header">
-                              <div class="card-title">Comments</div>
-                            </div>
-                            <div class="card-body">
-                              <div class="d-flex mb-5">
-                                <div class="mr-4">
-                                  <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)">
-                                    <span class="badge bg-green"></span>
-                                  </span>
-                                </div>
-                                <div class="flex-fill">
-                                  <div class="d-flex mt-n1">
-                                    <h5 class="m-0">
-                                      Paweł Kuna
-                                    </h5>
-                                    <div class="ml-auto small text-muted">1 week ago</div>
-                                  </div>
-                                  <p class="mb-2">
-                                    This is PERFECT
-                                  </p>
-                                  <div class="small">
-                                    <span class="text-success mr-1">+47</span>
-                                    <a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="18 15 12 9 6 15"></polyline></svg>
-                                    </a>
-                                    <a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
-                                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
-                                    </a>
-                                    <span class="mr-1">·</span>
-                                    <a href="#" class="mr-1 text-muted">Reply</a>
-                                    <span class="mr-1">·</span>
-                                    <a href="#" class="text-muted">Edit</a>
-                                  </div>
-                                </div>
-                              </div>
-                              <div class="d-flex mb-5">
-                                <div class="mr-4">
-                                  <span class="avatar">
-                                    <span class="badge bg-green"></span>
-                                    JL</span>
-                                </div>
-                                <div class="flex-fill">
-                                  <div class="d-flex mt-n1">
-                                    <h5 class="m-0">
-                                      Jeffie Lewzey
-                                    </h5>
-                                    <div class="ml-auto small text-muted">1 week and 4 days ago</div>
-                                  </div>
-                                  <p class="mb-2">
-                                    She is so damn beautiful OMG i love her!!! does somebody knows what kind of music is this? sorry xD
-                                  </p>
-                                  <div class="small">
-                                    <span class="text-success mr-1">+45</span>
-                                    <a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="18 15 12 9 6 15"></polyline></svg>
-                                    </a>
-                                    <a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
-                                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
-                                    </a>
-                                    <span class="mr-1">·</span>
-                                    <a href="#" class="mr-1 text-muted">Reply</a>
-                                    <span class="mr-1">·</span>
-                                    <a href="#" class="text-muted">Edit</a>
-                                  </div>
-                                </div>
-                              </div>
-                              <div class="d-flex">
-                                <div class="mr-4">
-                                  <span class="avatar" style="background-image: url(../static/avatars/002m.jpg)">
-                                    <span class="badge bg-green"></span>
-                                  </span>
-                                </div>
-                                <div class="flex-fill">
-                                  <div class="d-flex mt-n1">
-                                    <h5 class="m-0">
-                                      Mallory Hulme
-                                    </h5>
-                                    <div class="ml-auto small text-muted">2 days ago</div>
-                                  </div>
-                                  <p class="mb-2">
-                                    Did anyone go camping in Oshkosh Wisconsin last month?
-                                  </p>
-                                  <div class="small">
-                                    <span class="text-success mr-1">+32</span>
-                                    <a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="18 15 12 9 6 15"></polyline></svg>
-                                    </a>
-                                    <a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
-                                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
-                                    </a>
-                                    <span class="mr-1">·</span>
-                                    <a href="#" class="mr-1 text-muted">Reply</a>
-                                    <span class="mr-1">·</span>
-                                    <a href="#" class="text-muted">Edit</a>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Comments<span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-5"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-4"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./static/avatars/000m.jpg)"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex-fill"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mt-n1"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"m-0"</span><span class="nt">&gt;</span>
-                  Paweł Kuna
-               <span class="nt">&lt;/h5&gt;</span>
-               <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto small text-muted"</span><span class="nt">&gt;</span>1 week ago<span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
-               This is PERFECT
-            <span class="nt">&lt;/p&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"small"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-success mr-1"</span><span class="nt">&gt;</span>+47<span class="nt">&lt;/span&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Vote Up"</span><span class="nt">&gt;&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"18 15 12 9 6 15"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
-               <span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"mr-1"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Vote Down"</span><span class="nt">&gt;</span>
-                  <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"6 9 12 15 18 9"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
-               <span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-1"</span><span class="nt">&gt;</span>·<span class="nt">&lt;/span&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"mr-1 text-muted"</span><span class="nt">&gt;</span>Reply<span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-1"</span><span class="nt">&gt;</span>·<span class="nt">&lt;/span&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Edit<span class="nt">&lt;/a&gt;</span>
-            <span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-5"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-4"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
-               JL<span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex-fill"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mt-n1"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"m-0"</span><span class="nt">&gt;</span>
-                  Jeffie Lewzey
-               <span class="nt">&lt;/h5&gt;</span>
-               <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto small text-muted"</span><span class="nt">&gt;</span>1 week and 4 days ago<span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
-               She is so damn beautiful OMG i love her!!! does somebody knows what kind of music is this? sorry xD
-            <span class="nt">&lt;/p&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"small"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-success mr-1"</span><span class="nt">&gt;</span>+45<span class="nt">&lt;/span&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Vote Up"</span><span class="nt">&gt;&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"18 15 12 9 6 15"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
-               <span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"mr-1"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Vote Down"</span><span class="nt">&gt;</span>
-                  <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"6 9 12 15 18 9"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
-               <span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-1"</span><span class="nt">&gt;</span>·<span class="nt">&lt;/span&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"mr-1 text-muted"</span><span class="nt">&gt;</span>Reply<span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-1"</span><span class="nt">&gt;</span>·<span class="nt">&lt;/span&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Edit<span class="nt">&lt;/a&gt;</span>
-            <span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-4"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./static/avatars/002m.jpg)"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex-fill"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mt-n1"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"m-0"</span><span class="nt">&gt;</span>
-                  Mallory Hulme
-               <span class="nt">&lt;/h5&gt;</span>
-               <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto small text-muted"</span><span class="nt">&gt;</span>2 days ago<span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
-               Did anyone go camping in Oshkosh Wisconsin last month?
-            <span class="nt">&lt;/p&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"small"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-success mr-1"</span><span class="nt">&gt;</span>+32<span class="nt">&lt;/span&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Vote Up"</span><span class="nt">&gt;&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"18 15 12 9 6 15"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
-               <span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"mr-1"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Vote Down"</span><span class="nt">&gt;</span>
-                  <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"6 9 12 15 18 9"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
-               <span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-1"</span><span class="nt">&gt;</span>·<span class="nt">&lt;/span&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"mr-1 text-muted"</span><span class="nt">&gt;</span>Reply<span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-1"</span><span class="nt">&gt;</span>·<span class="nt">&lt;/span&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Edit<span class="nt">&lt;/a&gt;</span>
-            <span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                    </div>
-                    <div class="row">
-                      <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                          Copy code
-                        </a>
-                      </div>
-                      <div class="col">
-                        <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                          <input type="hidden" name="data" value='{"title":"Comments card","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
-                          <div class=\"card\">\n   
-                            <div class=\"card-header\">\n      
-                              <div class=\"card-title\">Comments</div>
-                              \n   </div>
-                            \n   
-                            <div class=\"card-body\">\n\n      \n      
-                              <div class=\"d-flex mb-5\">\n         
-                                <div class=\"mr-4\">\n            <span class=\"avatar\" style=\"background-image: url(../static/avatars/000m.jpg)\">\n  <span class=\"badge bg-green\"></span>\n</span>\n\n         </div>
-                                \n         
-                                <div class=\"flex-fill\">\n            
-                                  <div class=\"d-flex mt-n1\">\n               
-                                    <h5 class=\"m-0\">\n                  Paweł Kuna\n               </h5>
-                                    \n               
-                                    <div class=\"ml-auto small text-muted\">1 week ago</div>
-                                    \n            </div>
-                                  \n            
-                                  <p class=\"mb-2\">\n               This is PERFECT\n            </p>
-                                  \n            
-                                  <div class=\"small\">\n               <span class=\"text-success mr-1\">+47</span>\n               <a href=\"#\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Vote Up\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><polyline points=\"18 15 12 9 6 15\"></polyline></svg>\n</a>\n               <a href=\"#\" class=\"mr-1\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Vote Down\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>\n\n               </a>\n               <span class=\"mr-1\">·</span>\n               <a href=\"#\" class=\"mr-1 text-muted\">Reply</a>\n               <span class=\"mr-1\">·</span>\n               <a href=\"#\" class=\"text-muted\">Edit</a>\n            </div>
-                                  \n         </div>
-                                \n      </div>
-                              \n      \n      
-                              <div class=\"d-flex mb-5\">\n         
-                                <div class=\"mr-4\">\n            <span class=\"avatar\">\n  <span class=\"badge bg-green\"></span>\nJL</span>\n\n         </div>
-                                \n         
-                                <div class=\"flex-fill\">\n            
-                                  <div class=\"d-flex mt-n1\">\n               
-                                    <h5 class=\"m-0\">\n                  Jeffie Lewzey\n               </h5>
-                                    \n               
-                                    <div class=\"ml-auto small text-muted\">1 week and 4 days ago</div>
-                                    \n            </div>
-                                  \n            
-                                  <p class=\"mb-2\">\n               She is so damn beautiful OMG i love her!!! does somebody knows what kind of music is this? sorry xD\n            </p>
-                                  \n            
-                                  <div class=\"small\">\n               <span class=\"text-success mr-1\">+45</span>\n               <a href=\"#\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Vote Up\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><polyline points=\"18 15 12 9 6 15\"></polyline></svg>\n</a>\n               <a href=\"#\" class=\"mr-1\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Vote Down\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>\n\n               </a>\n               <span class=\"mr-1\">·</span>\n               <a href=\"#\" class=\"mr-1 text-muted\">Reply</a>\n               <span class=\"mr-1\">·</span>\n               <a href=\"#\" class=\"text-muted\">Edit</a>\n            </div>
-                                  \n         </div>
-                                \n      </div>
-                              \n      \n      
-                              <div class=\"d-flex\">\n         
-                                <div class=\"mr-4\">\n            <span class=\"avatar\" style=\"background-image: url(../static/avatars/002m.jpg)\">\n  <span class=\"badge bg-green\"></span>\n</span>\n\n         </div>
-                                \n         
-                                <div class=\"flex-fill\">\n            
-                                  <div class=\"d-flex mt-n1\">\n               
-                                    <h5 class=\"m-0\">\n                  Mallory Hulme\n               </h5>
-                                    \n               
-                                    <div class=\"ml-auto small text-muted\">2 days ago</div>
-                                    \n            </div>
-                                  \n            
-                                  <p class=\"mb-2\">\n               Did anyone go camping in Oshkosh Wisconsin last month?\n            </p>
-                                  \n            
-                                  <div class=\"small\">\n               <span class=\"text-success mr-1\">+32</span>\n               <a href=\"#\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Vote Up\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><polyline points=\"18 15 12 9 6 15\"></polyline></svg>\n</a>\n               <a href=\"#\" class=\"mr-1\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Vote Down\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>\n\n               </a>\n               <span class=\"mr-1\">·</span>\n               <a href=\"#\" class=\"mr-1 text-muted\">Reply</a>\n               <span class=\"mr-1\">·</span>\n               <a href=\"#\" class=\"text-muted\">Edit</a>\n            </div>
-                                  \n         </div>
-                                \n      </div>
-                              \n      \n\n   </div>
-                            \n</div>
-                          \n\n\n</div>
-                        \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                        <button type="submit" class="btn btn-primary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                          Edit in CodePen
-                        </button>
-                      </form>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-</body>
-</html>
--- a/demo/components/card-ribbon.html
+++ b/demo/components/card-ribbon.html
@@ -1,576 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Card with ribbon - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-ribbon.png">
-    <meta name="twitter:site" content="@tabler_ui">
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-ribbon.png">
-    <meta property="og:image:width" content="1280">
-    <meta property="og:image:height" content="640">
-    <meta property="og:site_name" content="Tabler">
-    <meta property="og:type" content="object">
-    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-ribbon.html">
-    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <div class="content">
-        <header class="navbar-wrap navbar-expand-lg flex-column">
-          <div class="navbar navbar-border navbar-light bg-white">
-            <div class="container">
-              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
-                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
-              </a>
-              <ul class="nav navbar-menu align-items-center ml-auto">
-                <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-                    </svg>
-                    Source code
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block lh-1">
-                      Leesa Beaty
-                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                    </span>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      Profile
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                      Settings
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                      Inbox
-                      <span class="badge bg-primary ml-auto">6</span>
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                      Message
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-                      Need help?
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                      Sign out
-                    </a>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
-            <div class="container">
-              <ul class="navbar-nav flex-wrap flex-fill">
-                <li class="nav-item">
-                  <a class="nav-link" href="../index.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                    </span>
-                    Dashboard
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../form-elements.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                    </span>
-                    Form elements
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                    </span>
-                    Base
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../blank.html" >
-                        Starter page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../buttons.html" >
-                        Buttons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../datatables.html" >
-                        Data Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../400.html" class="dropdown-item">400 page</a>
-                        <a href="../401.html" class="dropdown-item">401 page</a>
-                        <a href="../403.html" class="dropdown-item">403 page</a>
-                        <a href="../404.html" class="dropdown-item">404 page</a>
-                        <a href="../500.html" class="dropdown-item">500 page</a>
-                        <a href="../503.html" class="dropdown-item">503 page</a>
-                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                    </span>
-                    A
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        B
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../tmp.html" class="dropdown-item">C</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../layouts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                    </span>
-                    Layouts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                    </span>
-                    Extra
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                    </span>
-                    Documentation
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/countup.html" >
-                        Countup
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/layout.html" >
-                        Layout
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/ribbons.html" >
-                        Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="d-none d-xl-block ml-auto">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
-            <!-- Page title -->
-            <div class="page-title-box">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <h2 class="page-title">
-                    Tabler components
-                  </h2>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-lg-3">
-                <div class="list-group list-group-transparent mb-0">
-                  <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                  <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                  <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action active">Card with ribbon</a>
-                  <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                  <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                  <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                  <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                  <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                  <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                  <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                  <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                  <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                  <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-                </div>
-              </div>
-              <div class="col-lg-9">
-                <div class="card">
-                  <div class="card-body p-6">
-                    <div class="card-title">Card with ribbon</div>
-                    <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                    <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                      <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                        <div class="flex-fill" style="max-width: 274px">
-                          <div class="card">
-                            <div class="card-body">
-                              <h3 class="card-title">Card with ribbon</h3>
-                              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.</p>
-                            </div>
-                            <div class="ribbon ribbon-bookmark bg-orange">-10%</div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card with ribbon<span class="nt">&lt;/h3&gt;</span>
-      <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.<span class="nt">&lt;/p&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ribbon ribbon-bookmark bg-orange"</span><span class="nt">&gt;</span>-10%<span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                    </div>
-                    <div class="row">
-                      <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                          Copy code
-                        </a>
-                      </div>
-                      <div class="col">
-                        <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                          <input type="hidden" name="data" value='{"title":"Card with ribbon","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n\n\n
-                          <div class=\"card\">\n\t
-                            <div class=\"card-body\">\n\t\t\n\t\t\t
-                              <h3 class=\"card-title\">Card with ribbon</h3>
-                              \n\t\t\t
-                              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.</p>
-                              \n\t\t\n\t</div>
-                            \n\n\t
-                            <div class=\"ribbon ribbon-bookmark bg-orange\">-10%</div>
-                            \n</div>
-                          \n\n\n</div>
-                        \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                        <button type="submit" class="btn btn-primary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                          Edit in CodePen
-                        </button>
-                      </form>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-</body>
-</html>
--- a/demo/components/card-tabs-bottom.html
+++ b/demo/components/card-tabs-bottom.html
@@ -1,694 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Card with bottom tabs - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-tabs-bottom.png">
-    <meta name="twitter:site" content="@tabler_ui">
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-tabs-bottom.png">
-    <meta property="og:image:width" content="1280">
-    <meta property="og:image:height" content="640">
-    <meta property="og:site_name" content="Tabler">
-    <meta property="og:type" content="object">
-    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-tabs-bottom.html">
-    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <div class="content">
-        <header class="navbar-wrap navbar-expand-lg flex-column">
-          <div class="navbar navbar-border navbar-light bg-white">
-            <div class="container">
-              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
-                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
-              </a>
-              <ul class="nav navbar-menu align-items-center ml-auto">
-                <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-                    </svg>
-                    Source code
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block lh-1">
-                      Leesa Beaty
-                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                    </span>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      Profile
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                      Settings
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                      Inbox
-                      <span class="badge bg-primary ml-auto">6</span>
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                      Message
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-                      Need help?
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                      Sign out
-                    </a>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
-            <div class="container">
-              <ul class="navbar-nav flex-wrap flex-fill">
-                <li class="nav-item">
-                  <a class="nav-link" href="../index.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                    </span>
-                    Dashboard
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../form-elements.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                    </span>
-                    Form elements
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                    </span>
-                    Base
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../blank.html" >
-                        Starter page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../buttons.html" >
-                        Buttons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../datatables.html" >
-                        Data Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../400.html" class="dropdown-item">400 page</a>
-                        <a href="../401.html" class="dropdown-item">401 page</a>
-                        <a href="../403.html" class="dropdown-item">403 page</a>
-                        <a href="../404.html" class="dropdown-item">404 page</a>
-                        <a href="../500.html" class="dropdown-item">500 page</a>
-                        <a href="../503.html" class="dropdown-item">503 page</a>
-                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                    </span>
-                    A
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        B
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../tmp.html" class="dropdown-item">C</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../layouts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                    </span>
-                    Layouts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                    </span>
-                    Extra
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                    </span>
-                    Documentation
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/countup.html" >
-                        Countup
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/layout.html" >
-                        Layout
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/ribbons.html" >
-                        Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="d-none d-xl-block ml-auto">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
-            <!-- Page title -->
-            <div class="page-title-box">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <h2 class="page-title">
-                    Tabler components
-                  </h2>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-lg-3">
-                <div class="list-group list-group-transparent mb-0">
-                  <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action active">Card with bottom tabs</a>
-                  <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                  <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                  <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                  <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                  <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                  <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                  <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                  <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                  <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                  <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                  <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                  <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-                </div>
-              </div>
-              <div class="col-lg-9">
-                <div class="card">
-                  <div class="card-body p-6">
-                    <div class="card-title">Card with bottom tabs</div>
-                    <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                    <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                      <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                        <div class="flex-fill" style="max-width: 572px">
-                          <!-- Cards with tabs component -->
-                          <div class="card-tabs">
-                            <div class="tab-content">
-                              <!-- Content of card #1 -->
-                              <div id="tab-bottom-1" class="card tab-pane active show">
-                                <div class="card-body">
-                                  <div class="card-title">Content of tab #1</div>
-                                  <p>
-                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-                                  </p>
-                                </div>
-                              </div>
-                              <!-- Content of card #2 -->
-                              <div id="tab-bottom-2" class="card tab-pane">
-                                <div class="card-body">
-                                  <div class="card-title">Content of tab #2</div>
-                                  <p>
-                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-                                  </p>
-                                </div>
-                              </div>
-                              <!-- Content of card #3 -->
-                              <div id="tab-bottom-3" class="card tab-pane">
-                                <div class="card-body">
-                                  <div class="card-title">Content of tab #3</div>
-                                  <p>
-                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-                                  </p>
-                                </div>
-                              </div>
-                              <!-- Content of card #4 -->
-                              <div id="tab-bottom-4" class="card tab-pane">
-                                <div class="card-body">
-                                  <div class="card-title">Content of tab #4</div>
-                                  <p>
-                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-                                  </p>
-                                </div>
-                              </div>
-                            </div>
-                            <!-- Cards navigation -->
-                            <ul class="nav nav-tabs nav-tabs-bottom">
-                              <li class="nav-item"><a href="#tab-bottom-1" class="nav-link active" data-toggle="tab">Tab 1</a></li>
-                              <li class="nav-item"><a href="#tab-bottom-2" class="nav-link" data-toggle="tab">Tab 2</a></li>
-                              <li class="nav-item"><a href="#tab-bottom-3" class="nav-link" data-toggle="tab">Tab 3</a></li>
-                              <li class="nav-item"><a href="#tab-bottom-4" class="nav-link" data-toggle="tab">Tab 4</a></li>
-                            </ul>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                      <pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Cards with tabs component --&gt;</span>
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-tabs"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">&gt;</span>
-      <span class="c">&lt;!-- Content of card #1 --&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-bottom-1"</span> <span class="na">class=</span><span class="s">"card tab-pane active show"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Content of tab #1<span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;p&gt;</span>
-               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-            <span class="nt">&lt;/p&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="c">&lt;!-- Content of card #2 --&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-bottom-2"</span> <span class="na">class=</span><span class="s">"card tab-pane"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Content of tab #2<span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;p&gt;</span>
-               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-            <span class="nt">&lt;/p&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="c">&lt;!-- Content of card #3 --&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-bottom-3"</span> <span class="na">class=</span><span class="s">"card tab-pane"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Content of tab #3<span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;p&gt;</span>
-               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-            <span class="nt">&lt;/p&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="c">&lt;!-- Content of card #4 --&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-bottom-4"</span> <span class="na">class=</span><span class="s">"card tab-pane"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Content of tab #4<span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;p&gt;</span>
-               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-            <span class="nt">&lt;/p&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="c">&lt;!-- Cards navigation --&gt;</span>
-   <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs nav-tabs-bottom"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-bottom-1"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
-      <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-bottom-2"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 2<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
-      <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-bottom-3"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
-      <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-bottom-4"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 4<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
-   <span class="nt">&lt;/ul&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                    </div>
-                    <div class="row">
-                      <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                          Copy code
-                        </a>
-                      </div>
-                      <div class="col">
-                        <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                          <input type="hidden" name="data" value='{"title":"Card with bottom tabs","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n\n\n\n\n\n\n\n<!-- Cards with tabs component -->\n
-                          <div class=\"card-tabs\">\n   \n      \n
-                            <div class=\"tab-content\">\n   \n   <!-- Content of card #1 -->\n   
-                              <div id=\"tab-bottom-1\" class=\"card tab-pane active show\">\n      
-                                <div class=\"card-body\">\n         
-                                  <div class=\"card-title\">Content of tab #1</div>
-                                  \n         
-                                  <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.\n         </p>
-                                  \n      </div>
-                                \n   </div>
-                              \n   \n   <!-- Content of card #2 -->\n   
-                              <div id=\"tab-bottom-2\" class=\"card tab-pane\">\n      
-                                <div class=\"card-body\">\n         
-                                  <div class=\"card-title\">Content of tab #2</div>
-                                  \n         
-                                  <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.\n         </p>
-                                  \n      </div>
-                                \n   </div>
-                              \n   \n   <!-- Content of card #3 -->\n   
-                              <div id=\"tab-bottom-3\" class=\"card tab-pane\">\n      
-                                <div class=\"card-body\">\n         
-                                  <div class=\"card-title\">Content of tab #3</div>
-                                  \n         
-                                  <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.\n         </p>
-                                  \n      </div>
-                                \n   </div>
-                              \n   \n   <!-- Content of card #4 -->\n   
-                              <div id=\"tab-bottom-4\" class=\"card tab-pane\">\n      
-                                <div class=\"card-body\">\n         
-                                  <div class=\"card-title\">Content of tab #4</div>
-                                  \n         
-                                  <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.\n         </p>
-                                  \n      </div>
-                                \n   </div>
-                              \n   \n</div>
-                            \n\n      \n<!-- Cards navigation -->\n
-                            <ul class=\"nav nav-tabs nav-tabs-bottom\">\n   \n   
-                              <li class=\"nav-item\"><a href=\"#tab-bottom-1\" class=\"nav-link active\" data-toggle=\"tab\">Tab 1</a></li>
-                              \n   \n   
-                              <li class=\"nav-item\"><a href=\"#tab-bottom-2\" class=\"nav-link\" data-toggle=\"tab\">Tab 2</a></li>
-                              \n   \n   
-                              <li class=\"nav-item\"><a href=\"#tab-bottom-3\" class=\"nav-link\" data-toggle=\"tab\">Tab 3</a></li>
-                              \n   \n   
-                              <li class=\"nav-item\"><a href=\"#tab-bottom-4\" class=\"nav-link\" data-toggle=\"tab\">Tab 4</a></li>
-                              \n   \n</ul>
-                            \n\n   \n</div>
-                          \n\n\n</div>
-                        \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                        <button type="submit" class="btn btn-primary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                          Edit in CodePen
-                        </button>
-                      </form>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-</body>
-</html>
--- a/demo/components/card-with-image.html
+++ b/demo/components/card-with-image.html
@@ -1,594 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Card with side image - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-with-image.png">
-    <meta name="twitter:site" content="@tabler_ui">
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-with-image.png">
-    <meta property="og:image:width" content="1280">
-    <meta property="og:image:height" content="640">
-    <meta property="og:site_name" content="Tabler">
-    <meta property="og:type" content="object">
-    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-with-image.html">
-    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <div class="content">
-        <header class="navbar-wrap navbar-expand-lg flex-column">
-          <div class="navbar navbar-border navbar-light bg-white">
-            <div class="container">
-              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
-                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
-              </a>
-              <ul class="nav navbar-menu align-items-center ml-auto">
-                <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-                    </svg>
-                    Source code
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block lh-1">
-                      Leesa Beaty
-                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                    </span>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      Profile
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                      Settings
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                      Inbox
-                      <span class="badge bg-primary ml-auto">6</span>
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                      Message
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-                      Need help?
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                      Sign out
-                    </a>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
-            <div class="container">
-              <ul class="navbar-nav flex-wrap flex-fill">
-                <li class="nav-item">
-                  <a class="nav-link" href="../index.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                    </span>
-                    Dashboard
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../form-elements.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                    </span>
-                    Form elements
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                    </span>
-                    Base
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../blank.html" >
-                        Starter page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../buttons.html" >
-                        Buttons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../datatables.html" >
-                        Data Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../400.html" class="dropdown-item">400 page</a>
-                        <a href="../401.html" class="dropdown-item">401 page</a>
-                        <a href="../403.html" class="dropdown-item">403 page</a>
-                        <a href="../404.html" class="dropdown-item">404 page</a>
-                        <a href="../500.html" class="dropdown-item">500 page</a>
-                        <a href="../503.html" class="dropdown-item">503 page</a>
-                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                    </span>
-                    A
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        B
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../tmp.html" class="dropdown-item">C</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../layouts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                    </span>
-                    Layouts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                    </span>
-                    Extra
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                    </span>
-                    Documentation
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/countup.html" >
-                        Countup
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/layout.html" >
-                        Layout
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/ribbons.html" >
-                        Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="d-none d-xl-block ml-auto">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
-            <!-- Page title -->
-            <div class="page-title-box">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <h2 class="page-title">
-                    Tabler components
-                  </h2>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-lg-3">
-                <div class="list-group list-group-transparent mb-0">
-                  <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                  <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                  <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                  <a href="/components/card-with-image.html" class="list-group-item list-group-item-action active">Card with side image</a>
-                  <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                  <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                  <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                  <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                  <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                  <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                  <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                  <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                  <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-                </div>
-              </div>
-              <div class="col-lg-9">
-                <div class="card">
-                  <div class="card-body p-6">
-                    <div class="card-title">Card with side image</div>
-                    <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                    <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                      <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                        <div class="flex-fill" style="max-width: 572px">
-                          <div class="card">
-                            <div class="row row-0">
-                              <div class="col-md-3">
-                                <img src="../static/photos/2854fd67ddbd6217.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-                              </div>
-                              <div class="col">
-                                <div class="card-body">
-                                  <h3 class="card-title">Card with side image</h3>
-                                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-0"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-3"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/2854fd67ddbd6217.jpg"</span> <span class="na">class=</span><span class="s">"w-100 h-100 object-cover"</span> <span class="na">alt=</span><span class="s">"Card side image"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card with side image<span class="nt">&lt;/h3&gt;</span>
-            <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-               neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                    </div>
-                    <div class="row">
-                      <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                          Copy code
-                        </a>
-                      </div>
-                      <div class="col">
-                        <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                          <input type="hidden" name="data" value='{"title":"Card with side image","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
-                          <div class=\"card\">\n   
-                            <div class=\"row row-0\">\n      
-                              <div class=\"col-md-3\">\n         <img src=\"../static/photos/2854fd67ddbd6217.jpg\" class=\"w-100 h-100 object-cover\" alt=\"Card side image\">\n      </div>
-                              \n      
-                              <div class=\"col\">\n         
-                                <div class=\"card-body\">\n            \n            
-                                  <h3 class=\"card-title\">Card with side image</h3>
-                                  \n            \n            
-                                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima\n               neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                                  \n         </div>
-                                \n      </div>
-                              \n   </div>
-                            \n</div>
-                          \n\n\n</div>
-                        \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                        <button type="submit" class="btn btn-primary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                          Edit in CodePen
-                        </button>
-                      </form>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-</body>
-</html>
--- a/demo/components/empty.html
+++ b/demo/components/empty.html
@@ -1,597 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Empty state - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/empty.png">
-    <meta name="twitter:site" content="@tabler_ui">
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/empty.png">
-    <meta property="og:image:width" content="1280">
-    <meta property="og:image:height" content="640">
-    <meta property="og:site_name" content="Tabler">
-    <meta property="og:type" content="object">
-    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/empty.html">
-    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <div class="content">
-        <header class="navbar-wrap navbar-expand-lg flex-column">
-          <div class="navbar navbar-border navbar-light bg-white">
-            <div class="container">
-              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
-                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
-              </a>
-              <ul class="nav navbar-menu align-items-center ml-auto">
-                <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-                    </svg>
-                    Source code
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block lh-1">
-                      Leesa Beaty
-                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                    </span>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      Profile
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                      Settings
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                      Inbox
-                      <span class="badge bg-primary ml-auto">6</span>
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                      Message
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-                      Need help?
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                      Sign out
-                    </a>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
-            <div class="container">
-              <ul class="navbar-nav flex-wrap flex-fill">
-                <li class="nav-item">
-                  <a class="nav-link" href="../index.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                    </span>
-                    Dashboard
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../form-elements.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                    </span>
-                    Form elements
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                    </span>
-                    Base
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../blank.html" >
-                        Starter page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../buttons.html" >
-                        Buttons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../datatables.html" >
-                        Data Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../400.html" class="dropdown-item">400 page</a>
-                        <a href="../401.html" class="dropdown-item">401 page</a>
-                        <a href="../403.html" class="dropdown-item">403 page</a>
-                        <a href="../404.html" class="dropdown-item">404 page</a>
-                        <a href="../500.html" class="dropdown-item">500 page</a>
-                        <a href="../503.html" class="dropdown-item">503 page</a>
-                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                    </span>
-                    A
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        B
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../tmp.html" class="dropdown-item">C</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../layouts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                    </span>
-                    Layouts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                    </span>
-                    Extra
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                    </span>
-                    Documentation
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/countup.html" >
-                        Countup
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/layout.html" >
-                        Layout
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/ribbons.html" >
-                        Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="d-none d-xl-block ml-auto">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
-            <!-- Page title -->
-            <div class="page-title-box">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <h2 class="page-title">
-                    Tabler components
-                  </h2>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-lg-3">
-                <div class="list-group list-group-transparent mb-0">
-                  <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                  <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                  <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                  <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                  <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                  <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                  <a href="/components/empty.html" class="list-group-item list-group-item-action active">Empty state</a>
-                  <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                  <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                  <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                  <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                  <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                  <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-                </div>
-              </div>
-              <div class="col-lg-9">
-                <div class="card">
-                  <div class="card-body p-6">
-                    <div class="card-title">Empty state</div>
-                    <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                    <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                      <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                        <div >
-                          <div class="empty">
-                            <div class="empty-icon">
-                              <img src="../static/illustrations/undraw_quitting_time_dm8t.svg" class="h-8 mb-4" alt="">
-                            </div>
-                            <p class="empty-title h3">No results found</p>
-                            <p class="empty-subtitle text-muted">
-                              Try adjusting your search or filter to find what you're looking for.
-                            </p>
-                            <div class="empty-action">
-                              <a href="../." class="btn btn-primary">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                                Search again
-                              </a>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-icon"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/illustrations/undraw_quitting_time_dm8t.svg"</span> <span class="na">class=</span><span class="s">"h-8 mb-4"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-title h3"</span><span class="nt">&gt;</span>No results found<span class="nt">&lt;/p&gt;</span>
-   <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-subtitle text-muted"</span><span class="nt">&gt;</span>
-      Try adjusting your search or filter to find what you're looking for.
-   <span class="nt">&lt;/p&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-action"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"./."</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"11"</span> <span class="na">cy=</span><span class="s">"11"</span> <span class="na">r=</span><span class="s">"8"</span><span class="nt">&gt;&lt;/circle&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"21"</span> <span class="na">y1=</span><span class="s">"21"</span> <span class="na">x2=</span><span class="s">"16.65"</span> <span class="na">y2=</span><span class="s">"16.65"</span><span class="nt">&gt;&lt;/line&gt;&lt;/svg&gt;</span>
-         Search again
-      <span class="nt">&lt;/a&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                    </div>
-                    <div class="row">
-                      <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                          Copy code
-                        </a>
-                      </div>
-                      <div class="col">
-                        <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                          <input type="hidden" name="data" value='{"title":"Empty state","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n
-                          <div class=\"empty\">\n   
-                            <div class=\"empty-icon\">\n      \n      \n      <img src=\"../static/illustrations/undraw_quitting_time_dm8t.svg\" class=\"h-8 mb-4\" alt=\"\">\n\n      \n   </div>
-                            \n\n   
-                            <p class=\"empty-title h3\">No results found</p>
-                            \n   
-                            <p class=\"empty-subtitle text-muted\">\n      Try adjusting your search or filter to find what youre looking for.\n   </p>
-                            \n   
-                            <div class=\"empty-action\">\n      \n      \n      <a href=\"../.\" class=\"btn btn-primary\">\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\nSearch again\n</a>\n\n   </div>
-                            \n</div>
-                          \n\n\n</div>
-                        \nre looking for.\n   </p>
-                      \n   
-                      <div class=\"empty-action\">\n      \n      \n      <a href=\"../.\" class=\"btn btn-primary\">\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\nSearch again\n</a>\n\n   </div>
-                      \n</div>
-                    \n\n\n</div>
-                  \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                  <button type="submit" class="btn btn-primary mt-4 btn-block">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                    Edit in CodePen
-                  </button>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </main>
-</div>
-</div>
-</div>
-<!-- Libs JS -->
-<script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-<!-- Tabler Core -->
-<script src="../dist/js/tabler.min.js?1580339009"></script>
-<script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-</body>
-</html>
--- a/demo/components/index.html
+++ b/demo/components/index.html
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <meta charset="utf-8">
-  <title>Redirecting…</title>
-  <link rel="canonical" href="../components.html">
-  <meta http-equiv="refresh" content="0; url=../components.html">
-  <meta name="robots" content="noindex">
-  <noscript><a href="../components.html">Click here if you are not redirected.</a></noscript>
-  <script>
-    location="../components.html";
-  </script>
-</html>
--- a/demo/components/input-colors.html
+++ b/demo/components/input-colors.html
@@ -1,720 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Color input - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/input-colors.png">
-    <meta name="twitter:site" content="@tabler_ui">
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/input-colors.png">
-    <meta property="og:image:width" content="1280">
-    <meta property="og:image:height" content="640">
-    <meta property="og:site_name" content="Tabler">
-    <meta property="og:type" content="object">
-    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/input-colors.html">
-    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <div class="content">
-        <header class="navbar-wrap navbar-expand-lg flex-column">
-          <div class="navbar navbar-border navbar-light bg-white">
-            <div class="container">
-              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
-                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
-              </a>
-              <ul class="nav navbar-menu align-items-center ml-auto">
-                <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-                    </svg>
-                    Source code
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block lh-1">
-                      Leesa Beaty
-                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                    </span>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      Profile
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                      Settings
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                      Inbox
-                      <span class="badge bg-primary ml-auto">6</span>
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                      Message
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-                      Need help?
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                      Sign out
-                    </a>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
-            <div class="container">
-              <ul class="navbar-nav flex-wrap flex-fill">
-                <li class="nav-item">
-                  <a class="nav-link" href="../index.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                    </span>
-                    Dashboard
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../form-elements.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                    </span>
-                    Form elements
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                    </span>
-                    Base
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../blank.html" >
-                        Starter page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../buttons.html" >
-                        Buttons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../datatables.html" >
-                        Data Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../400.html" class="dropdown-item">400 page</a>
-                        <a href="../401.html" class="dropdown-item">401 page</a>
-                        <a href="../403.html" class="dropdown-item">403 page</a>
-                        <a href="../404.html" class="dropdown-item">404 page</a>
-                        <a href="../500.html" class="dropdown-item">500 page</a>
-                        <a href="../503.html" class="dropdown-item">503 page</a>
-                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                    </span>
-                    A
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        B
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../tmp.html" class="dropdown-item">C</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../layouts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                    </span>
-                    Layouts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                    </span>
-                    Extra
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                    </span>
-                    Documentation
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/countup.html" >
-                        Countup
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/layout.html" >
-                        Layout
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/ribbons.html" >
-                        Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="d-none d-xl-block ml-auto">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
-            <!-- Page title -->
-            <div class="page-title-box">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <h2 class="page-title">
-                    Tabler components
-                  </h2>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-lg-3">
-                <div class="list-group list-group-transparent mb-0">
-                  <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                  <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                  <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                  <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                  <a href="/components/input-colors.html" class="list-group-item list-group-item-action active">Color input</a>
-                  <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                  <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                  <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                  <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                  <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                  <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                  <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                  <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-                </div>
-              </div>
-              <div class="col-lg-9">
-                <div class="card">
-                  <div class="card-body p-6">
-                    <div class="card-title">Color input</div>
-                    <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                    <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                      <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                        <div >
-                          <div class="mb-3">
-                            <label class="form-label">Color Input</label>
-                            <div class="row row-xs">
-                              <div class="col-auto">
-                                <label class="form-colorinput">
-                                  <input name="color" type="checkbox" value="dark" class="form-colorinput-input" />
-                                  <span class="form-colorinput-color bg-dark"></span>
-                                </label>
-                              </div>
-                              <div class="col-auto">
-                                <label class="form-colorinput form-colorinput-light">
-                                  <input name="color" type="checkbox" value="white" class="form-colorinput-input"  checked/>
-                                  <span class="form-colorinput-color bg-white"></span>
-                                </label>
-                              </div>
-                              <div class="col-auto">
-                                <label class="form-colorinput">
-                                  <input name="color" type="checkbox" value="blue" class="form-colorinput-input"  checked/>
-                                  <span class="form-colorinput-color bg-blue"></span>
-                                </label>
-                              </div>
-                              <div class="col-auto">
-                                <label class="form-colorinput">
-                                  <input name="color" type="checkbox" value="azure" class="form-colorinput-input"  checked/>
-                                  <span class="form-colorinput-color bg-azure"></span>
-                                </label>
-                              </div>
-                              <div class="col-auto">
-                                <label class="form-colorinput">
-                                  <input name="color" type="checkbox" value="indigo" class="form-colorinput-input" />
-                                  <span class="form-colorinput-color bg-indigo"></span>
-                                </label>
-                              </div>
-                              <div class="col-auto">
-                                <label class="form-colorinput">
-                                  <input name="color" type="checkbox" value="purple" class="form-colorinput-input" />
-                                  <span class="form-colorinput-color bg-purple"></span>
-                                </label>
-                              </div>
-                              <div class="col-auto">
-                                <label class="form-colorinput">
-                                  <input name="color" type="checkbox" value="pink" class="form-colorinput-input" />
-                                  <span class="form-colorinput-color bg-pink"></span>
-                                </label>
-                              </div>
-                              <div class="col-auto">
-                                <label class="form-colorinput">
-                                  <input name="color" type="checkbox" value="red" class="form-colorinput-input" />
-                                  <span class="form-colorinput-color bg-red"></span>
-                                </label>
-                              </div>
-                              <div class="col-auto">
-                                <label class="form-colorinput">
-                                  <input name="color" type="checkbox" value="orange" class="form-colorinput-input" />
-                                  <span class="form-colorinput-color bg-orange"></span>
-                                </label>
-                              </div>
-                              <div class="col-auto">
-                                <label class="form-colorinput">
-                                  <input name="color" type="checkbox" value="yellow" class="form-colorinput-input" />
-                                  <span class="form-colorinput-color bg-yellow"></span>
-                                </label>
-                              </div>
-                              <div class="col-auto">
-                                <label class="form-colorinput">
-                                  <input name="color" type="checkbox" value="lime" class="form-colorinput-input" />
-                                  <span class="form-colorinput-color bg-lime"></span>
-                                </label>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Color Input<span class="nt">&lt;/label&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-xs"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"dark"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-dark"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput form-colorinput-light"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"white"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-white"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"blue"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-blue"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"azure"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-azure"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"indigo"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-indigo"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"purple"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-purple"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"pink"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-pink"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"red"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-red"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"orange"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-orange"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"yellow"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-yellow"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"lime"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-lime"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                    </div>
-                    <div class="row">
-                      <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                          Copy code
-                        </a>
-                      </div>
-                      <div class="col">
-                        <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                          <input type="hidden" name="data" value='{"title":"Color input","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n\n\n
-                          <div class=\"mb-3\">\n\t<label class=\"form-label\">Color Input</label>\n\t
-                            <div class=\"row row-xs\">\n\t\t\n\t\t
-                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"dark\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-dark\"></span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t\t
-                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput form-colorinput-light\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"white\" class=\"form-colorinput-input\"  checked/>\n\t\t\t\t<span class=\"form-colorinput-color bg-white\"></span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t\t
-                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"blue\" class=\"form-colorinput-input\"  checked/>\n\t\t\t\t<span class=\"form-colorinput-color bg-blue\"></span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t\t
-                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"azure\" class=\"form-colorinput-input\"  checked/>\n\t\t\t\t<span class=\"form-colorinput-color bg-azure\"></span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t\t
-                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"indigo\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-indigo\"></span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t\t
-                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"purple\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-purple\"></span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t\t
-                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"pink\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-pink\"></span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t\t
-                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"red\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-red\"></span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t\t
-                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"orange\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-orange\"></span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t\t
-                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"yellow\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-yellow\"></span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t\t
-                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"lime\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-lime\"></span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t</div>
-                            \n</div>
-                          \n\n\n</div>
-                        \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                        <button type="submit" class="btn btn-primary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                          Edit in CodePen
-                        </button>
-                      </form>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-</body>
-</html>
--- a/demo/components/input-image.html
+++ b/demo/components/input-image.html
@@ -1,728 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Image input - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/input-image.png">
-    <meta name="twitter:site" content="@tabler_ui">
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/input-image.png">
-    <meta property="og:image:width" content="1280">
-    <meta property="og:image:height" content="640">
-    <meta property="og:site_name" content="Tabler">
-    <meta property="og:type" content="object">
-    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/input-image.html">
-    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <div class="content">
-        <header class="navbar-wrap navbar-expand-lg flex-column">
-          <div class="navbar navbar-border navbar-light bg-white">
-            <div class="container">
-              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
-                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
-              </a>
-              <ul class="nav navbar-menu align-items-center ml-auto">
-                <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-                    </svg>
-                    Source code
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block lh-1">
-                      Leesa Beaty
-                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                    </span>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      Profile
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                      Settings
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                      Inbox
-                      <span class="badge bg-primary ml-auto">6</span>
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                      Message
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-                      Need help?
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                      Sign out
-                    </a>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
-            <div class="container">
-              <ul class="navbar-nav flex-wrap flex-fill">
-                <li class="nav-item">
-                  <a class="nav-link" href="../index.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                    </span>
-                    Dashboard
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../form-elements.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                    </span>
-                    Form elements
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                    </span>
-                    Base
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../blank.html" >
-                        Starter page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../buttons.html" >
-                        Buttons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../datatables.html" >
-                        Data Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../400.html" class="dropdown-item">400 page</a>
-                        <a href="../401.html" class="dropdown-item">401 page</a>
-                        <a href="../403.html" class="dropdown-item">403 page</a>
-                        <a href="../404.html" class="dropdown-item">404 page</a>
-                        <a href="../500.html" class="dropdown-item">500 page</a>
-                        <a href="../503.html" class="dropdown-item">503 page</a>
-                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                    </span>
-                    A
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        B
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../tmp.html" class="dropdown-item">C</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../layouts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                    </span>
-                    Layouts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                    </span>
-                    Extra
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                    </span>
-                    Documentation
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/countup.html" >
-                        Countup
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/layout.html" >
-                        Layout
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/ribbons.html" >
-                        Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="d-none d-xl-block ml-auto">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
-            <!-- Page title -->
-            <div class="page-title-box">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <h2 class="page-title">
-                    Tabler components
-                  </h2>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-lg-3">
-                <div class="list-group list-group-transparent mb-0">
-                  <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                  <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                  <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                  <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                  <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                  <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                  <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                  <a href="/components/input-image.html" class="list-group-item list-group-item-action active">Image input</a>
-                  <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                  <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                  <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                  <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                  <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-                </div>
-              </div>
-              <div class="col-lg-9">
-                <div class="card">
-                  <div class="card-body p-6">
-                    <div class="card-title">Image input</div>
-                    <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                    <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                      <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                        <div class="flex-fill" style="max-width: 572px">
-                          <div class="mb-3">
-                            <label class="form-label">Image Check</label>
-                            <div class="row row-xs">
-                              <div class="col-6 col-sm-4">
-                                <label class="form-imagecheck mb-2">
-                                  <input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
-                                  <span class="form-imagecheck-figure">
-                                    <img src="../static/photos/1b73704b282a8ec6.jpg" alt="Breakfast served with tea, bread and eggs" class="form-imagecheck-image">
-                                  </span>
-                                </label>
-                              </div>
-                              <div class="col-6 col-sm-4">
-                                <label class="form-imagecheck mb-2">
-                                  <input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input"  checked/>
-                                  <span class="form-imagecheck-figure">
-                                    <img src="../static/photos/3d2998219313cd37.jpg" alt="Book, fairy lights" class="form-imagecheck-image">
-                                  </span>
-                                </label>
-                              </div>
-                              <div class="col-6 col-sm-4">
-                                <label class="form-imagecheck mb-2">
-                                  <input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
-                                  <span class="form-imagecheck-figure">
-                                    <img src="../static/photos/6ab3200b14549f8a.jpg" alt="Healthy Dinner" class="form-imagecheck-image">
-                                  </span>
-                                </label>
-                              </div>
-                              <div class="col-6 col-sm-4">
-                                <label class="form-imagecheck mb-2">
-                                  <input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input"  checked/>
-                                  <span class="form-imagecheck-figure">
-                                    <img src="../static/photos/6d35d9a2bd6c63c2.jpg" alt="Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water" class="form-imagecheck-image">
-                                  </span>
-                                </label>
-                              </div>
-                              <div class="col-6 col-sm-4">
-                                <label class="form-imagecheck mb-2">
-                                  <input name="form-imagecheck" type="checkbox" value="5" class="form-imagecheck-input" />
-                                  <span class="form-imagecheck-figure">
-                                    <img src="../static/photos/8a26974ee6444acd.jpg" alt="Beautiful blonde woman on a wooden pier by the lake" class="form-imagecheck-image">
-                                  </span>
-                                </label>
-                              </div>
-                              <div class="col-6 col-sm-4">
-                                <label class="form-imagecheck mb-2">
-                                  <input name="form-imagecheck" type="checkbox" value="6" class="form-imagecheck-input" />
-                                  <span class="form-imagecheck-figure">
-                                    <img src="../static/photos/8c13ad59f739558c.jpg" alt="Still life of mandarin oranges with leaves" class="form-imagecheck-image">
-                                  </span>
-                                </label>
-                              </div>
-                              <div class="col-6 col-sm-4">
-                                <label class="form-imagecheck mb-2">
-                                  <input name="form-imagecheck" type="checkbox" value="7" class="form-imagecheck-input"  checked/>
-                                  <span class="form-imagecheck-figure">
-                                    <img src="../static/photos/8fdeb4785d2b82ef.jpg" alt="Blonde woman having a healthy snack at the wooden pier" class="form-imagecheck-image">
-                                  </span>
-                                </label>
-                              </div>
-                              <div class="col-6 col-sm-4">
-                                <label class="form-imagecheck mb-2">
-                                  <input name="form-imagecheck" type="checkbox" value="8" class="form-imagecheck-input" />
-                                  <span class="form-imagecheck-figure">
-                                    <img src="../static/photos/9f36332564ca271d.jpg" alt="Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed" class="form-imagecheck-image">
-                                  </span>
-                                </label>
-                              </div>
-                              <div class="col-6 col-sm-4">
-                                <label class="form-imagecheck mb-2">
-                                  <input name="form-imagecheck" type="checkbox" value="9" class="form-imagecheck-input" />
-                                  <span class="form-imagecheck-figure">
-                                    <img src="../static/photos/35b88fc04a518c1b.jpg" alt="Overhead view of macarons on a marble slab" class="form-imagecheck-image">
-                                  </span>
-                                </label>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Image Check<span class="nt">&lt;/label&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-xs"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/1b73704b282a8ec6.jpg"</span> <span class="na">alt=</span><span class="s">"Breakfast served with tea, bread and eggs"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"2"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/3d2998219313cd37.jpg"</span> <span class="na">alt=</span><span class="s">"Book, fairy lights"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"3"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/6ab3200b14549f8a.jpg"</span> <span class="na">alt=</span><span class="s">"Healthy Dinner"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"4"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/6d35d9a2bd6c63c2.jpg"</span> <span class="na">alt=</span><span class="s">"Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"5"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/8a26974ee6444acd.jpg"</span> <span class="na">alt=</span><span class="s">"Beautiful blonde woman on a wooden pier by the lake"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"6"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/8c13ad59f739558c.jpg"</span> <span class="na">alt=</span><span class="s">"Still life of mandarin oranges with leaves"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"7"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/8fdeb4785d2b82ef.jpg"</span> <span class="na">alt=</span><span class="s">"Blonde woman having a healthy snack at the wooden pier"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"8"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/9f36332564ca271d.jpg"</span> <span class="na">alt=</span><span class="s">"Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"9"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/35b88fc04a518c1b.jpg"</span> <span class="na">alt=</span><span class="s">"Overhead view of macarons on a marble slab"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                    </div>
-                    <div class="row">
-                      <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                          Copy code
-                        </a>
-                      </div>
-                      <div class="col">
-                        <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                          <input type="hidden" name="data" value='{"title":"Image input","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n
-                          <div class=\"mb-3\">\n\t<label class=\"form-label\">Image Check</label>\n\t
-                            <div class=\"row row-xs\">\n\t\t\n\n\t\t\n\t\t
-                              <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"1\" class=\"form-imagecheck-input\" />\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/1b73704b282a8ec6.jpg\" alt=\"Breakfast served with tea, bread and eggs\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t\t
-                              <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"2\" class=\"form-imagecheck-input\"  checked/>\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/3d2998219313cd37.jpg\" alt=\"Book, fairy lights\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t\t
-                              <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"3\" class=\"form-imagecheck-input\" />\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/6ab3200b14549f8a.jpg\" alt=\"Healthy Dinner\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t\t
-                              <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"4\" class=\"form-imagecheck-input\"  checked/>\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/6d35d9a2bd6c63c2.jpg\" alt=\"Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t\t
-                              <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"5\" class=\"form-imagecheck-input\" />\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/8a26974ee6444acd.jpg\" alt=\"Beautiful blonde woman on a wooden pier by the lake\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t\t
-                              <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"6\" class=\"form-imagecheck-input\" />\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/8c13ad59f739558c.jpg\" alt=\"Still life of mandarin oranges with leaves\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t\t
-                              <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"7\" class=\"form-imagecheck-input\"  checked/>\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/8fdeb4785d2b82ef.jpg\" alt=\"Blonde woman having a healthy snack at the wooden pier\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t\t
-                              <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"8\" class=\"form-imagecheck-input\" />\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/9f36332564ca271d.jpg\" alt=\"Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t\t
-                              <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"9\" class=\"form-imagecheck-input\" />\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/35b88fc04a518c1b.jpg\" alt=\"Overhead view of macarons on a marble slab\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
-                              \n\t\t\n\t</div>
-                            \n</div>
-                          \n\n\n</div>
-                        \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                        <button type="submit" class="btn btn-primary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                          Edit in CodePen
-                        </button>
-                      </form>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-</body>
-</html>
--- a/demo/components/progress.html
+++ b/demo/components/progress.html
@@ -1,680 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Progress bar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/progress.png">
-    <meta name="twitter:site" content="@tabler_ui">
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/progress.png">
-    <meta property="og:image:width" content="1280">
-    <meta property="og:image:height" content="640">
-    <meta property="og:site_name" content="Tabler">
-    <meta property="og:type" content="object">
-    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/progress.html">
-    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <div class="content">
-        <header class="navbar-wrap navbar-expand-lg flex-column">
-          <div class="navbar navbar-border navbar-light bg-white">
-            <div class="container">
-              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
-                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
-              </a>
-              <ul class="nav navbar-menu align-items-center ml-auto">
-                <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-                    </svg>
-                    Source code
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block lh-1">
-                      Leesa Beaty
-                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                    </span>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      Profile
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                      Settings
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                      Inbox
-                      <span class="badge bg-primary ml-auto">6</span>
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                      Message
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-                      Need help?
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                      Sign out
-                    </a>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
-            <div class="container">
-              <ul class="navbar-nav flex-wrap flex-fill">
-                <li class="nav-item">
-                  <a class="nav-link" href="../index.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                    </span>
-                    Dashboard
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../form-elements.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                    </span>
-                    Form elements
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                    </span>
-                    Base
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../blank.html" >
-                        Starter page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../buttons.html" >
-                        Buttons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../datatables.html" >
-                        Data Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../400.html" class="dropdown-item">400 page</a>
-                        <a href="../401.html" class="dropdown-item">401 page</a>
-                        <a href="../403.html" class="dropdown-item">403 page</a>
-                        <a href="../404.html" class="dropdown-item">404 page</a>
-                        <a href="../500.html" class="dropdown-item">500 page</a>
-                        <a href="../503.html" class="dropdown-item">503 page</a>
-                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                    </span>
-                    A
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        B
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../tmp.html" class="dropdown-item">C</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../layouts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                    </span>
-                    Layouts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                    </span>
-                    Extra
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                    </span>
-                    Documentation
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/countup.html" >
-                        Countup
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/layout.html" >
-                        Layout
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/ribbons.html" >
-                        Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="d-none d-xl-block ml-auto">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
-            <!-- Page title -->
-            <div class="page-title-box">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <h2 class="page-title">
-                    Tabler components
-                  </h2>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-lg-3">
-                <div class="list-group list-group-transparent mb-0">
-                  <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                  <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                  <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                  <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                  <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                  <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                  <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                  <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                  <a href="/components/progress.html" class="list-group-item list-group-item-action active">Progress bar</a>
-                  <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                  <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                  <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                  <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-                </div>
-              </div>
-              <div class="col-lg-9">
-                <div class="card">
-                  <div class="card-body p-6">
-                    <div class="card-title">Progress bar</div>
-                    <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                    <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                      <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                        <div class="flex-fill" style="max-width: 274px">
-                          <div>
-                            <div class="d-flex mb-1 align-items-center lh-1">
-                              <div class="text-h5 font-weight-bolder m-0">Label</div>
-                              <span class="ml-auto text-h6 strong">45%</span>
-                            </div>
-                            <div class="progress progress-sm">
-                              <div class="progress-bar bg-blue" style="width: 45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
-                                <span class="sr-only">45% Complete</span>
-                              </div>
-                            </div>
-                          </div>
-                          <div>
-                            <div class="d-flex mb-1 align-items-center lh-1">
-                              <div class="text-h5 font-weight-bolder m-0">Label</div>
-                              <span class="ml-auto text-h6 strong">32%</span>
-                            </div>
-                            <div class="progress progress-sm">
-                              <div class="progress-bar bg-red" style="width: 32%" role="progressbar" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100">
-                                <span class="sr-only">32% Complete</span>
-                              </div>
-                            </div>
-                          </div>
-                          <div>
-                            <div class="d-flex mb-1 align-items-center lh-1">
-                              <div class="text-h5 font-weight-bolder m-0">Label</div>
-                              <span class="ml-auto text-h6 strong">90%</span>
-                            </div>
-                            <div class="progress progress-sm">
-                              <div class="progress-bar bg-yellow" style="width: 90%" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
-                                <span class="sr-only">90% Complete</span>
-                              </div>
-                            </div>
-                          </div>
-                          <div>
-                            <div class="d-flex mb-1 align-items-center lh-1">
-                              <div class="text-h5 font-weight-bolder m-0">Label</div>
-                              <span class="ml-auto text-h6 strong">51%</span>
-                            </div>
-                            <div class="progress progress-sm">
-                              <div class="progress-bar bg-green" style="width: 51%" role="progressbar" aria-valuenow="51" aria-valuemin="0" aria-valuemax="100">
-                                <span class="sr-only">51% Complete</span>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center lh-1"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-h5 font-weight-bolder m-0"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6 strong"</span><span class="nt">&gt;</span>45%<span class="nt">&lt;/span&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-blue"</span> <span class="na">style=</span><span class="s">"width: 45%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"45"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>45% Complete<span class="nt">&lt;/span&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center lh-1"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-h5 font-weight-bolder m-0"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6 strong"</span><span class="nt">&gt;</span>32%<span class="nt">&lt;/span&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-red"</span> <span class="na">style=</span><span class="s">"width: 32%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"32"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>32% Complete<span class="nt">&lt;/span&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center lh-1"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-h5 font-weight-bolder m-0"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6 strong"</span><span class="nt">&gt;</span>90%<span class="nt">&lt;/span&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-yellow"</span> <span class="na">style=</span><span class="s">"width: 90%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"90"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>90% Complete<span class="nt">&lt;/span&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center lh-1"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-h5 font-weight-bolder m-0"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6 strong"</span><span class="nt">&gt;</span>51%<span class="nt">&lt;/span&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-green"</span> <span class="na">style=</span><span class="s">"width: 51%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"51"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>51% Complete<span class="nt">&lt;/span&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                    </div>
-                    <div class="row">
-                      <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                          Copy code
-                        </a>
-                      </div>
-                      <div class="col">
-                        <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                          <input type="hidden" name="data" value='{"title":"Progress bar","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n\n\n
-                          <div>\n   
-                            <div class=\"d-flex mb-1 align-items-center lh-1\">\n      
-                              <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
-                              \n      \n      <span class=\"ml-auto text-h6 strong\">45%</span>\n   </div>
-                            \n   \n\n
-                            <div class=\"progress progress-sm\">\n   \n      
-                              <div class=\"progress-bar bg-blue\" style=\"width: 45%\" role=\"progressbar\" aria-valuenow=\"45\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">45% Complete</span>\n         \n      </div>
-                              \n   \n</div>
-                            \n\n</div>
-                          \n\n\n\n\n
-                          <div>\n   
-                            <div class=\"d-flex mb-1 align-items-center lh-1\">\n      
-                              <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
-                              \n      \n      <span class=\"ml-auto text-h6 strong\">32%</span>\n   </div>
-                            \n   \n\n
-                            <div class=\"progress progress-sm\">\n   \n      
-                              <div class=\"progress-bar bg-red\" style=\"width: 32%\" role=\"progressbar\" aria-valuenow=\"32\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">32% Complete</span>\n         \n      </div>
-                              \n   \n</div>
-                            \n\n</div>
-                          \n\n\n\n\n
-                          <div>\n   
-                            <div class=\"d-flex mb-1 align-items-center lh-1\">\n      
-                              <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
-                              \n      \n      <span class=\"ml-auto text-h6 strong\">90%</span>\n   </div>
-                            \n   \n\n
-                            <div class=\"progress progress-sm\">\n   \n      
-                              <div class=\"progress-bar bg-yellow\" style=\"width: 90%\" role=\"progressbar\" aria-valuenow=\"90\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">90% Complete</span>\n         \n      </div>
-                              \n   \n</div>
-                            \n\n</div>
-                          \n\n\n\n\n
-                          <div>\n   
-                            <div class=\"d-flex mb-1 align-items-center lh-1\">\n      
-                              <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
-                              \n      \n      <span class=\"ml-auto text-h6 strong\">51%</span>\n   </div>
-                            \n   \n\n
-                            <div class=\"progress progress-sm\">\n   \n      
-                              <div class=\"progress-bar bg-green\" style=\"width: 51%\" role=\"progressbar\" aria-valuenow=\"51\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">51% Complete</span>\n         \n      </div>
-                              \n   \n</div>
-                            \n\n</div>
-                          \n\n\n</div>
-                        \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                        <button type="submit" class="btn btn-primary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                          Edit in CodePen
-                        </button>
-                      </form>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-</body>
-</html>
--- a/demo/components/simple-avatar.html
+++ b/demo/components/simple-avatar.html
@@ -1,558 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Simple avatar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/simple-avatar.png">
-    <meta name="twitter:site" content="@tabler_ui">
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/simple-avatar.png">
-    <meta property="og:image:width" content="1280">
-    <meta property="og:image:height" content="640">
-    <meta property="og:site_name" content="Tabler">
-    <meta property="og:type" content="object">
-    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/simple-avatar.html">
-    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <div class="content">
-        <header class="navbar-wrap navbar-expand-lg flex-column">
-          <div class="navbar navbar-border navbar-light bg-white">
-            <div class="container">
-              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
-                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
-              </a>
-              <ul class="nav navbar-menu align-items-center ml-auto">
-                <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-                    </svg>
-                    Source code
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block lh-1">
-                      Leesa Beaty
-                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                    </span>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      Profile
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                      Settings
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                      Inbox
-                      <span class="badge bg-primary ml-auto">6</span>
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                      Message
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-                      Need help?
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                      Sign out
-                    </a>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
-            <div class="container">
-              <ul class="navbar-nav flex-wrap flex-fill">
-                <li class="nav-item">
-                  <a class="nav-link" href="../index.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                    </span>
-                    Dashboard
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../form-elements.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                    </span>
-                    Form elements
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                    </span>
-                    Base
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../blank.html" >
-                        Starter page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../buttons.html" >
-                        Buttons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../datatables.html" >
-                        Data Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../400.html" class="dropdown-item">400 page</a>
-                        <a href="../401.html" class="dropdown-item">401 page</a>
-                        <a href="../403.html" class="dropdown-item">403 page</a>
-                        <a href="../404.html" class="dropdown-item">404 page</a>
-                        <a href="../500.html" class="dropdown-item">500 page</a>
-                        <a href="../503.html" class="dropdown-item">503 page</a>
-                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                    </span>
-                    A
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        B
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../tmp.html" class="dropdown-item">C</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../layouts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                    </span>
-                    Layouts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                    </span>
-                    Extra
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                    </span>
-                    Documentation
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/countup.html" >
-                        Countup
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/layout.html" >
-                        Layout
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/ribbons.html" >
-                        Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="d-none d-xl-block ml-auto">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
-            <!-- Page title -->
-            <div class="page-title-box">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <h2 class="page-title">
-                    Tabler components
-                  </h2>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-lg-3">
-                <div class="list-group list-group-transparent mb-0">
-                  <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                  <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                  <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                  <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                  <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                  <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                  <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                  <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                  <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                  <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                  <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                  <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action active">Simple avatar</a>
-                  <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-                </div>
-              </div>
-              <div class="col-lg-9">
-                <div class="card">
-                  <div class="card-body p-6">
-                    <div class="card-title">Simple avatar</div>
-                    <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                    <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                      <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                        <div >
-                          <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)">
-                            <span class="badge bg-green"></span>
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./static/avatars/000m.jpg)"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
-<span class="nt">&lt;/span&gt;</span></code></pre>
-                    </div>
-                    <div class="row">
-                      <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                          Copy code
-                        </a>
-                      </div>
-                      <div class="col">
-                        <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                          <input type="hidden" name="data" value='{"title":"Simple avatar","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  <span class=\"avatar\" style=\"background-image: url(../static/avatars/000m.jpg)\">\n  <span class=\"badge bg-green\"></span>\n</span>\n\n\n</div>
-                        \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                        <button type="submit" class="btn btn-primary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                          Edit in CodePen
-                        </button>
-                      </form>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-</body>
-</html>
--- a/demo/components/simple-card.html
+++ b/demo/components/simple-card.html
@@ -1,570 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Simple box - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/simple-card.png">
-    <meta name="twitter:site" content="@tabler_ui">
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/simple-card.png">
-    <meta property="og:image:width" content="1280">
-    <meta property="og:image:height" content="640">
-    <meta property="og:site_name" content="Tabler">
-    <meta property="og:type" content="object">
-    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/simple-card.html">
-    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <div class="content">
-        <header class="navbar-wrap navbar-expand-lg flex-column">
-          <div class="navbar navbar-border navbar-light bg-white">
-            <div class="container">
-              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
-                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
-              </a>
-              <ul class="nav navbar-menu align-items-center ml-auto">
-                <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-                    </svg>
-                    Source code
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block lh-1">
-                      Leesa Beaty
-                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                    </span>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      Profile
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                      Settings
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                      Inbox
-                      <span class="badge bg-primary ml-auto">6</span>
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                      Message
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-                      Need help?
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                      Sign out
-                    </a>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
-            <div class="container">
-              <ul class="navbar-nav flex-wrap flex-fill">
-                <li class="nav-item">
-                  <a class="nav-link" href="../index.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                    </span>
-                    Dashboard
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../form-elements.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                    </span>
-                    Form elements
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                    </span>
-                    Base
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../blank.html" >
-                        Starter page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../buttons.html" >
-                        Buttons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../datatables.html" >
-                        Data Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../400.html" class="dropdown-item">400 page</a>
-                        <a href="../401.html" class="dropdown-item">401 page</a>
-                        <a href="../403.html" class="dropdown-item">403 page</a>
-                        <a href="../404.html" class="dropdown-item">404 page</a>
-                        <a href="../500.html" class="dropdown-item">500 page</a>
-                        <a href="../503.html" class="dropdown-item">503 page</a>
-                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                    </span>
-                    A
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        B
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../tmp.html" class="dropdown-item">C</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../layouts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                    </span>
-                    Layouts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                    </span>
-                    Extra
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                    </span>
-                    Documentation
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/countup.html" >
-                        Countup
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/layout.html" >
-                        Layout
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/ribbons.html" >
-                        Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="d-none d-xl-block ml-auto">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
-            <!-- Page title -->
-            <div class="page-title-box">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <h2 class="page-title">
-                    Tabler components
-                  </h2>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-lg-3">
-                <div class="list-group list-group-transparent mb-0">
-                  <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                  <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                  <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                  <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                  <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                  <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                  <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                  <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                  <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                  <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                  <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                  <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                  <a href="/components/simple-card.html" class="list-group-item list-group-item-action active">Simple box</a>
-                </div>
-              </div>
-              <div class="col-lg-9">
-                <div class="card">
-                  <div class="card-body p-6">
-                    <div class="card-title">Simple box</div>
-                    <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                    <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                      <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                        <div class="flex-fill" style="max-width: 274px">
-                          <div class="card">
-                            <div class="card-body">
-                              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                                neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-         neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                    </div>
-                    <div class="row">
-                      <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                          Copy code
-                        </a>
-                      </div>
-                      <div class="col">
-                        <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                          <input type="hidden" name="data" value='{"title":"Simple box","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
-                          <div class=\"card\">\n      
-                            <div class=\"card-body\">\n         
-                              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima\n            neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                              \n      </div>
-                            \n</div>
-                          \n\n\n</div>
-                        \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                        <button type="submit" class="btn btn-primary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                          Edit in CodePen
-                        </button>
-                      </form>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-</body>
-</html>
--- a/demo/components/widget-revenue.html
+++ b/demo/components/widget-revenue.html
@@ -1,630 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Revenue chart - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/widget-revenue.png">
-    <meta name="twitter:site" content="@tabler_ui">
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/widget-revenue.png">
-    <meta property="og:image:width" content="1280">
-    <meta property="og:image:height" content="640">
-    <meta property="og:site_name" content="Tabler">
-    <meta property="og:type" content="object">
-    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/widget-revenue.html">
-    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <div class="content">
-        <header class="navbar-wrap navbar-expand-lg flex-column">
-          <div class="navbar navbar-border navbar-light bg-white">
-            <div class="container">
-              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
-                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
-              </a>
-              <ul class="nav navbar-menu align-items-center ml-auto">
-                <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-                    </svg>
-                    Source code
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block lh-1">
-                      Leesa Beaty
-                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                    </span>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      Profile
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                      Settings
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                      Inbox
-                      <span class="badge bg-primary ml-auto">6</span>
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                      Message
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-                      Need help?
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                      Sign out
-                    </a>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
-            <div class="container">
-              <ul class="navbar-nav flex-wrap flex-fill">
-                <li class="nav-item">
-                  <a class="nav-link" href="../index.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                    </span>
-                    Dashboard
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../form-elements.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                    </span>
-                    Form elements
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                    </span>
-                    Base
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../blank.html" >
-                        Starter page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../buttons.html" >
-                        Buttons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../datatables.html" >
-                        Data Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../400.html" class="dropdown-item">400 page</a>
-                        <a href="../401.html" class="dropdown-item">401 page</a>
-                        <a href="../403.html" class="dropdown-item">403 page</a>
-                        <a href="../404.html" class="dropdown-item">404 page</a>
-                        <a href="../500.html" class="dropdown-item">500 page</a>
-                        <a href="../503.html" class="dropdown-item">503 page</a>
-                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                    </span>
-                    A
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        B
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../tmp.html" class="dropdown-item">C</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../layouts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                    </span>
-                    Layouts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                    </span>
-                    Extra
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                    </span>
-                    Documentation
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/countup.html" >
-                        Countup
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/layout.html" >
-                        Layout
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/ribbons.html" >
-                        Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="d-none d-xl-block ml-auto">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
-            <!-- Page title -->
-            <div class="page-title-box">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <h2 class="page-title">
-                    Tabler components
-                  </h2>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-lg-3">
-                <div class="list-group list-group-transparent mb-0">
-                  <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                  <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                  <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                  <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                  <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                  <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                  <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                  <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                  <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                  <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action active">Revenue chart</a>
-                  <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                  <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                  <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-                </div>
-              </div>
-              <div class="col-lg-9">
-                <div class="card">
-                  <div class="card-body p-6">
-                    <div class="card-title">Revenue chart</div>
-                    <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                    <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                      <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                        <div >
-                          <div class="card">
-                            <div class="card-body">
-                              <div class="d-flex align-items-center">
-                                <div class="subheader">Revenue</div>
-                                <div class="ml-auto">
-                                  <div class="dropdown">
-                                    <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                      Last 7 days
-                                    </a>
-                                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
-                                      <a class="dropdown-item active" href="#">Last 7 days</a>
-                                      <a class="dropdown-item" href="#">Last 30 days</a>
-                                      <a class="dropdown-item" href="#">Last 3 months</a>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <div class="d-flex align-items-baseline">
-                                <div class="h1 mb-0 mr-2">$4,300</div>
-                                <div class="mr-auto">
-                                  <span class="text-green d-inline-flex align-items-center lh-1">
-                                    8% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
-                                  </span>
-                                </div>
-                              </div>
-                            </div>
-                            <div id="chart-revenue-bg"  class="chart-sm" ></div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"subheader"</span><span class="nt">&gt;</span>Revenue<span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-toggle text-muted"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">id=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
-                  Last 7 days
-               <span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-right"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenuButton"</span><span class="nt">&gt;</span>
-                  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Last 7 days<span class="nt">&lt;/a&gt;</span>
-                  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Last 30 days<span class="nt">&lt;/a&gt;</span>
-                  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Last 3 months<span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-baseline"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"h1 mb-0 mr-2"</span><span class="nt">&gt;</span>$4,300<span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-auto"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-green d-inline-flex align-items-center lh-1"</span><span class="nt">&gt;</span>
-               8% <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon ml-1"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"23 6 13.5 15.5 8.5 10.5 1 18"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"17 6 23 6 23 12"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"chart-revenue-bg"</span>  <span class="na">class=</span><span class="s">"chart-sm"</span> <span class="nt">&gt;&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                    </div>
-                    <div class="row">
-                      <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                          Copy code
-                        </a>
-                      </div>
-                      <div class="col">
-                        <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                          <input type="hidden" name="data" value='{"title":"Revenue chart","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
-                          <div class=\"card\">\n   
-                            <div class=\"card-body\">\n      
-                              <div class=\"d-flex align-items-center\">\n         
-                                <div class=\"subheader\">Revenue</div>
-                                \n         
-                                <div class=\"ml-auto\">\n            
-                                  <div class=\"dropdown\">\n   <a class=\"dropdown-toggle text-muted\" href=\"#\" id=\"dropdownMenuButton\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n      Last 7 days\n   </a>\n   
-                                    <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"dropdownMenuButton\">\n      <a class=\"dropdown-item active\" href=\"#\">Last 7 days</a>\n      <a class=\"dropdown-item\" href=\"#\">Last 30 days</a>\n      <a class=\"dropdown-item\" href=\"#\">Last 3 months</a>\n   </div>
-                                    \n</div>
-                                  \n\n         </div>
-                                \n      </div>
-                              \n      
-                              <div class=\"d-flex align-items-baseline\">\n         
-                                <div class=\"h1 mb-0 mr-2\">$4,300</div>
-                                \n         
-                                <div class=\"mr-auto\">\n            \n\n\n<span class=\"text-green d-inline-flex align-items-center lh-1\">\n   8% <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon ml-1\"><polyline points=\"23 6 13.5 15.5 8.5 10.5 1 18\"></polyline><polyline points=\"17 6 23 6 23 12\"></polyline></svg>\n\n</span>\n\n         </div>
-                                \n      </div>
-                              \n   </div>
-                            \n   \n\n\n\n\n\n\n\n\n\n
-                            <div id=\"chart-revenue-bg\"  class=\"chart-sm\" ></div>
-                            \n\n\n\n\n\n\n\n\n\n\n</div>
-                          \n\n\n</div>
-                        \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                        <button type="submit" class="btn btn-primary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                          Edit in CodePen
-                        </button>
-                      </form>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-</body>
-</html>
--- a/demo/components/widget-sales.html
+++ b/demo/components/widget-sales.html
@@ -1,644 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Sales widget - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/widget-sales.png">
-    <meta name="twitter:site" content="@tabler_ui">
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/widget-sales.png">
-    <meta property="og:image:width" content="1280">
-    <meta property="og:image:height" content="640">
-    <meta property="og:site_name" content="Tabler">
-    <meta property="og:type" content="object">
-    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/widget-sales.html">
-    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <div class="content">
-        <header class="navbar-wrap navbar-expand-lg flex-column">
-          <div class="navbar navbar-border navbar-light bg-white">
-            <div class="container">
-              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
-                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
-              </a>
-              <ul class="nav navbar-menu align-items-center ml-auto">
-                <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-                    </svg>
-                    Source code
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block lh-1">
-                      Leesa Beaty
-                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                    </span>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      Profile
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                      Settings
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                      Inbox
-                      <span class="badge bg-primary ml-auto">6</span>
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                      Message
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-                      Need help?
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                      Sign out
-                    </a>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
-            <div class="container">
-              <ul class="navbar-nav flex-wrap flex-fill">
-                <li class="nav-item">
-                  <a class="nav-link" href="../index.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                    </span>
-                    Dashboard
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../form-elements.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                    </span>
-                    Form elements
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                    </span>
-                    Base
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../blank.html" >
-                        Starter page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../buttons.html" >
-                        Buttons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../datatables.html" >
-                        Data Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../400.html" class="dropdown-item">400 page</a>
-                        <a href="../401.html" class="dropdown-item">401 page</a>
-                        <a href="../403.html" class="dropdown-item">403 page</a>
-                        <a href="../404.html" class="dropdown-item">404 page</a>
-                        <a href="../500.html" class="dropdown-item">500 page</a>
-                        <a href="../503.html" class="dropdown-item">503 page</a>
-                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                    </span>
-                    A
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        B
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="../tmp.html" class="dropdown-item">C</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../layouts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                    </span>
-                    Layouts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                    </span>
-                    Extra
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                    </span>
-                    Documentation
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="../docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/countup.html" >
-                        Countup
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/layout.html" >
-                        Layout
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/ribbons.html" >
-                        Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="../docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="d-none d-xl-block ml-auto">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
-            <!-- Page title -->
-            <div class="page-title-box">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <h2 class="page-title">
-                    Tabler components
-                  </h2>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-lg-3">
-                <div class="list-group list-group-transparent mb-0">
-                  <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                  <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                  <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                  <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                  <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                  <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                  <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                  <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                  <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                  <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                  <a href="/components/widget-sales.html" class="list-group-item list-group-item-action active">Sales widget</a>
-                  <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                  <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-                </div>
-              </div>
-              <div class="col-lg-9">
-                <div class="card">
-                  <div class="card-body p-6">
-                    <div class="card-title">Sales widget</div>
-                    <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                    <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                      <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                        <div class="flex-fill" style="max-width: 274px">
-                          <div class="card">
-                            <div class="card-body">
-                              <div class="d-flex align-items-center">
-                                <div class="subheader">Sales</div>
-                                <div class="ml-auto">
-                                  <div class="dropdown">
-                                    <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                      Last 7 days
-                                    </a>
-                                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
-                                      <a class="dropdown-item active" href="#">Last 7 days</a>
-                                      <a class="dropdown-item" href="#">Last 30 days</a>
-                                      <a class="dropdown-item" href="#">Last 3 months</a>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <div class="h1 mb-3">75%</div>
-                              <div class="d-flex mb-2">
-                                <div>Conversion rate</div>
-                                <div class="ml-auto">
-                                  <span class="text-green d-inline-flex align-items-center lh-1">
-                                    7% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
-                                  </span>
-                                </div>
-                              </div>
-                              <div class="progress progress-sm">
-                                <div class="progress-bar bg-blue" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
-                                  <span class="sr-only">75% Complete</span>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"subheader"</span><span class="nt">&gt;</span>Sales<span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-toggle text-muted"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">id=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
-                  Last 7 days
-               <span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-right"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenuButton"</span><span class="nt">&gt;</span>
-                  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Last 7 days<span class="nt">&lt;/a&gt;</span>
-                  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Last 30 days<span class="nt">&lt;/a&gt;</span>
-                  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Last 3 months<span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"h1 mb-3"</span><span class="nt">&gt;</span>75%<span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-2"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div&gt;</span>Conversion rate<span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-green d-inline-flex align-items-center lh-1"</span><span class="nt">&gt;</span>
-               7% <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon ml-1"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"23 6 13.5 15.5 8.5 10.5 1 18"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"17 6 23 6 23 12"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-blue"</span> <span class="na">style=</span><span class="s">"width: 75%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"75"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>75% Complete<span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                    </div>
-                    <div class="row">
-                      <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                          Copy code
-                        </a>
-                      </div>
-                      <div class="col">
-                        <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                          <input type="hidden" name="data" value='{"title":"Sales widget","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
-                          <div class=\"card\">\n   
-                            <div class=\"card-body\">\n      
-                              <div class=\"d-flex align-items-center\">\n         
-                                <div class=\"subheader\">Sales</div>
-                                \n         
-                                <div class=\"ml-auto\">\n            
-                                  <div class=\"dropdown\">\n   <a class=\"dropdown-toggle text-muted\" href=\"#\" id=\"dropdownMenuButton\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n      Last 7 days\n   </a>\n   
-                                    <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"dropdownMenuButton\">\n      <a class=\"dropdown-item active\" href=\"#\">Last 7 days</a>\n      <a class=\"dropdown-item\" href=\"#\">Last 30 days</a>\n      <a class=\"dropdown-item\" href=\"#\">Last 3 months</a>\n   </div>
-                                    \n</div>
-                                  \n\n         </div>
-                                \n      </div>
-                              \n      
-                              <div class=\"h1 mb-3\">75%</div>
-                              \n      
-                              <div class=\"d-flex mb-2\">\n         
-                                <div>Conversion rate</div>
-                                \n         
-                                <div class=\"ml-auto\">\n\n\n<span class=\"text-green d-inline-flex align-items-center lh-1\">\n   7% <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon ml-1\"><polyline points=\"23 6 13.5 15.5 8.5 10.5 1 18\"></polyline><polyline points=\"17 6 23 6 23 12\"></polyline></svg>\n\n</span>\n</div>
-                                \n      </div>
-                              \n      \n\n
-                              <div class=\"progress progress-sm\">\n   \n      
-                                <div class=\"progress-bar bg-blue\" style=\"width: 75%\" role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">75% Complete</span>\n         \n      </div>
-                                \n   \n</div>
-                              \n\n   </div>
-                            \n</div>
-                          \n\n\n</div>
-                        \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                        <button type="submit" class="btn btn-primary mt-4 btn-block">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                          Edit in CodePen
-                        </button>
-                      </form>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-</body>
-</html>
--- a/demo/crypto-currencies.html
+++ b/demo/crypto-currencies.html
--- a/demo/datatables.html
+++ b/demo/datatables.html
@@ -1,835 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
-->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Data Tables - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <div class="content">
-        <header class="navbar-wrap navbar-expand-lg flex-column">
-          <div class="navbar navbar-border navbar-light bg-white">
-            <div class="container">
-              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <a href="." class="navbar-brand hide-sidebar-visible m-0">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
-              </a>
-              <ul class="nav navbar-menu align-items-center ml-auto">
-                <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-                    </svg>
-                    Source code
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block lh-1">
-                      Leesa Beaty
-                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                    </span>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      Profile
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                      Settings
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                      Inbox
-                      <span class="badge bg-primary ml-auto">6</span>
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                      Message
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-                      Need help?
-                    </a>
-                    <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                      Sign out
-                    </a>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
-            <div class="container">
-              <ul class="navbar-nav flex-wrap flex-fill">
-                <li class="nav-item">
-                  <a class="nav-link" href="./index.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                    </span>
-                    Dashboard
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./form-elements.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                    </span>
-                    Form elements
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                    </span>
-                    Base
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./blank.html" >
-                        Starter page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./buttons.html" >
-                        Buttons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./datatables.html" >
-                        Data Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./400.html" class="dropdown-item">400 page</a>
-                        <a href="./401.html" class="dropdown-item">401 page</a>
-                        <a href="./403.html" class="dropdown-item">403 page</a>
-                        <a href="./404.html" class="dropdown-item">404 page</a>
-                        <a href="./500.html" class="dropdown-item">500 page</a>
-                        <a href="./503.html" class="dropdown-item">503 page</a>
-                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                    </span>
-                    A
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        B
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./tmp.html" class="dropdown-item">C</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./layouts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                    </span>
-                    Layouts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                    </span>
-                    Extra
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                    </span>
-                    Documentation
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/countup.html" >
-                        Countup
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/layout.html" >
-                        Layout
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/ribbons.html" >
-                        Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="d-none d-xl-block ml-auto">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
-            <div class="card">
-              <div class="card-header">
-                <h3 class="card-title">Invoices</h3>
-              </div>
-              <div class="card-body border-bottom py-3">
-                <div class="d-flex">
-                  <div class="mb-0">
-                    Show
-                    <div class="mx-2 d-inline-block">
-                      <input type="text" class="form-control form-control-sm" value="8" size="3">
-                    </div>
-                    entries
-                  </div>
-                  <div class="mb-0 ml-auto">
-                    Search:
-                    <div class="ml-2 d-inline-block">
-                      <input type="text" class="form-control form-control-sm">
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="table-responsive">
-                <table class="table card-table table-vcenter text-nowrap datatable">
-                  <thead>
-                    <tr>
-                      <th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
-                      <th class="w-1p">No. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm text-dark icon-thick"><polyline points="18 15 12 9 6 15"></polyline></svg>
-                      </th>
-                      <th>Invoice Subject <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
-                      </th>
-                      <th>Client <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
-                      </th>
-                      <th>VAT No. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
-                      </th>
-                      <th>Created <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
-                      </th>
-                      <th>Status <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
-                      </th>
-                      <th>Price <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
-                      </th>
-                      <th></th>
-                      <th></th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
-                      <td><span class="text-muted">001401</span></td>
-                      <td><a href="invoice.html" class="text-reset" tabindex="-1">Design Works</a></td>
-                      <td>
-                        <span class="flag flag-country-us"></span>
-                        Carlson Limited
-                      </td>
-                      <td>
-                        87956621
-                      </td>
-                      <td>
-                        15 Dec 2017
-                      </td>
-                      <td>
-                        <span class="status-icon bg-success"></span> Paid
-                      </td>
-                      <td>$887</td>
-                      <td class="text-right">
-                        <button class="btn btn-secondary btn-sm align-text-top">Manage</button>
-                        <span class="dropdown ml-1">
-                          <button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
-                          <div class="dropdown-menu">
-                            <a class="dropdown-item" href="#">
-                              Action
-                            </a>
-                            <a class="dropdown-item" href="#">
-                              Another action
-                            </a>
-                          </div>
-                        </span>
-                      </td>
-                      <td>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm float-right"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
-                      <td><span class="text-muted">001402</span></td>
-                      <td><a href="invoice.html" class="text-reset" tabindex="-1">UX Wireframes</a></td>
-                      <td>
-                        <span class="flag flag-country-gb"></span>
-                        Adobe
-                      </td>
-                      <td>
-                        87956421
-                      </td>
-                      <td>
-                        12 Apr 2017
-                      </td>
-                      <td>
-                        <span class="status-icon bg-warning"></span> Pending
-                      </td>
-                      <td>$1200</td>
-                      <td class="text-right">
-                        <button class="btn btn-secondary btn-sm align-text-top">Manage</button>
-                        <span class="dropdown ml-1">
-                          <button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
-                          <div class="dropdown-menu">
-                            <a class="dropdown-item" href="#">
-                              Action
-                            </a>
-                            <a class="dropdown-item" href="#">
-                              Another action
-                            </a>
-                          </div>
-                        </span>
-                      </td>
-                      <td>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm float-right"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
-                      <td><span class="text-muted">001403</span></td>
-                      <td><a href="invoice.html" class="text-reset" tabindex="-1">New Dashboard</a></td>
-                      <td>
-                        <span class="flag flag-country-de"></span>
-                        Bluewolf
-                      </td>
-                      <td>
-                        87952621
-                      </td>
-                      <td>
-                        23 Oct 2017
-                      </td>
-                      <td>
-                        <span class="status-icon bg-warning"></span> Pending
-                      </td>
-                      <td>$534</td>
-                      <td class="text-right">
-                        <button class="btn btn-secondary btn-sm align-text-top">Manage</button>
-                        <span class="dropdown ml-1">
-                          <button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
-                          <div class="dropdown-menu">
-                            <a class="dropdown-item" href="#">
-                              Action
-                            </a>
-                            <a class="dropdown-item" href="#">
-                              Another action
-                            </a>
-                          </div>
-                        </span>
-                      </td>
-                      <td>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm float-right"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
-                      <td><span class="text-muted">001404</span></td>
-                      <td><a href="invoice.html" class="text-reset" tabindex="-1">Landing Page</a></td>
-                      <td>
-                        <span class="flag flag-country-br"></span>
-                        Salesforce
-                      </td>
-                      <td>
-                        87953421
-                      </td>
-                      <td>
-                        2 Sep 2017
-                      </td>
-                      <td>
-                        <span class="status-icon bg-secondary"></span> Due in 2 Weeks
-                      </td>
-                      <td>$1500</td>
-                      <td class="text-right">
-                        <button class="btn btn-secondary btn-sm align-text-top">Manage</button>
-                        <span class="dropdown ml-1">
-                          <button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
-                          <div class="dropdown-menu">
-                            <a class="dropdown-item" href="#">
-                              Action
-                            </a>
-                            <a class="dropdown-item" href="#">
-                              Another action
-                            </a>
-                          </div>
-                        </span>
-                      </td>
-                      <td>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm float-right"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
-                      <td><span class="text-muted">001405</span></td>
-                      <td><a href="invoice.html" class="text-reset" tabindex="-1">Marketing Templates</a></td>
-                      <td>
-                        <span class="flag flag-country-pl"></span>
-                        Printic
-                      </td>
-                      <td>
-                        87956621
-                      </td>
-                      <td>
-                        29 Jan 2018
-                      </td>
-                      <td>
-                        <span class="status-icon bg-danger"></span> Paid Today
-                      </td>
-                      <td>$648</td>
-                      <td class="text-right">
-                        <button class="btn btn-secondary btn-sm align-text-top">Manage</button>
-                        <span class="dropdown ml-1">
-                          <button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
-                          <div class="dropdown-menu">
-                            <a class="dropdown-item" href="#">
-                              Action
-                            </a>
-                            <a class="dropdown-item" href="#">
-                              Another action
-                            </a>
-                          </div>
-                        </span>
-                      </td>
-                      <td>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm float-right"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
-                      <td><span class="text-muted">001406</span></td>
-                      <td><a href="invoice.html" class="text-reset" tabindex="-1">Sales Presentation</a></td>
-                      <td>
-                        <span class="flag flag-country-br"></span>
-                        Tabdaq
-                      </td>
-                      <td>
-                        87956621
-                      </td>
-                      <td>
-                        4 Feb 2018
-                      </td>
-                      <td>
-                        <span class="status-icon bg-secondary"></span> Due in 3 Weeks
-                      </td>
-                      <td>$300</td>
-                      <td class="text-right">
-                        <button class="btn btn-secondary btn-sm align-text-top">Manage</button>
-                        <span class="dropdown ml-1">
-                          <button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
-                          <div class="dropdown-menu">
-                            <a class="dropdown-item" href="#">
-                              Action
-                            </a>
-                            <a class="dropdown-item" href="#">
-                              Another action
-                            </a>
-                          </div>
-                        </span>
-                      </td>
-                      <td>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm float-right"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
-                      <td><span class="text-muted">001407</span></td>
-                      <td><a href="invoice.html" class="text-reset" tabindex="-1">Logo & Print</a></td>
-                      <td>
-                        <span class="flag flag-country-us"></span>
-                        Apple
-                      </td>
-                      <td>
-                        87956621
-                      </td>
-                      <td>
-                        22 Mar 2018
-                      </td>
-                      <td>
-                        <span class="status-icon bg-success"></span> Paid Today
-                      </td>
-                      <td>$2500</td>
-                      <td class="text-right">
-                        <button class="btn btn-secondary btn-sm align-text-top">Manage</button>
-                        <span class="dropdown ml-1">
-                          <button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
-                          <div class="dropdown-menu">
-                            <a class="dropdown-item" href="#">
-                              Action
-                            </a>
-                            <a class="dropdown-item" href="#">
-                              Another action
-                            </a>
-                          </div>
-                        </span>
-                      </td>
-                      <td>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm float-right"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
-                      <td><span class="text-muted">001408</span></td>
-                      <td><a href="invoice.html" class="text-reset" tabindex="-1">Icons</a></td>
-                      <td>
-                        <span class="flag flag-country-pl"></span>
-                        Tookapic
-                      </td>
-                      <td>
-                        87956621
-                      </td>
-                      <td>
-                        13 May 2018
-                      </td>
-                      <td>
-                        <span class="status-icon bg-success"></span> Paid Today
-                      </td>
-                      <td>$940</td>
-                      <td class="text-right">
-                        <button class="btn btn-secondary btn-sm align-text-top">Manage</button>
-                        <span class="dropdown ml-1">
-                          <button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
-                          <div class="dropdown-menu">
-                            <a class="dropdown-item" href="#">
-                              Action
-                            </a>
-                            <a class="dropdown-item" href="#">
-                              Another action
-                            </a>
-                          </div>
-                        </span>
-                      </td>
-                      <td>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm float-right"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-              <div class="card-footer d-flex align-items-center border-top-0">
-                <p class="m-0 text-muted">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
-                <ul class="pagination m-0 ml-auto">
-                  <li class="page-item disabled">
-                    <a class="page-link" href="#" tabindex="-1">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="15 18 9 12 15 6"></polyline></svg>
-                      Prev
-                    </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</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="#">5</a></li>
-                  <li class="page-item">
-                    <a class="page-link" href="#">
-                      Next <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 18 15 12 9 6"></polyline></svg>
-                    </a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </main>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
-  </body>
-</html>
--- a/demo/dist/css/demo.css
+++ b/demo/dist/css/demo.css
@@ -0,0 +1,153 @@
+/*!
+* Tabler v1.0.0-alpha.8 (https://tabler.io)
+* @version 1.0.0-alpha.8
+* @link https://tabler.io
+* Copyright 2018-2020 The Tabler Authors
+* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+pre.highlight,
+.highlight pre {
+  max-height: 30rem;
+  margin: 1.5rem 0;
+  overflow: auto;
+  font-size: 0.75rem;
+  background: #354052;
+  border-radius: 3px;
+  color: #ffffff; }
+  pre.highlight::-webkit-scrollbar,
+  .highlight pre::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    -webkit-transition: .3s background;
+    transition: .3s background; }
+  pre.highlight::-webkit-scrollbar-thumb,
+  .highlight pre::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: transparent; }
+  pre.highlight::-webkit-scrollbar-corner,
+  .highlight pre::-webkit-scrollbar-corner {
+    background: transparent; }
+  pre.highlight:hover::-webkit-scrollbar-thumb,
+  .highlight pre:hover::-webkit-scrollbar-thumb {
+    background: #cbcfd6;
+    background: #5d6675; }
+
+.highlight .c, .highlight .c1 {
+  color: #a0aec0; }
+
+.highlight .na, .highlight .nx, .highlight .nl, .language-css .highlight .na, .language-scss .highlight .na {
+  color: #ffe484; }
+
+.highlight .s, .highlight .dl, .highlight .s1, .highlight .s2, .highlight .mh {
+  color: #b5f4a5; }
+
+.highlight .mi, .highlight .language-js .nb, .highlight .nc, .highlight .nd, .highlight .nt {
+  color: #93ddfd; }
+
+.highlight .language-html .nt, .highlight .nb {
+  color: #ff8383; }
+
+.highlight .k, .highlight .kd, .highlight .nv, .highlight .n {
+  color: #d9a9ff; }
+
+.example {
+  padding: 2rem;
+  margin: 2rem 0;
+  border: 1px solid rgba(95, 102, 110, 0.2);
+  border-radius: 3px 3px 0 0;
+  position: relative;
+  min-height: 12rem;
+  display: flex;
+  align-items: center;
+  overflow-x: auto; }
+
+.example-centered {
+  justify-content: center; }
+  .example-centered .example-content {
+    flex: 0 auto; }
+
+.example-content {
+  font-size: 0.875rem;
+  flex: 1;
+  max-width: 100%; }
+
+.example-bg {
+  background: #f5f7fb; }
+
+.example-code {
+  margin: 2rem 0;
+  border-top: none; }
+  .example-code pre {
+    margin: 0;
+    border-radius: 0 0 3px 3px; }
+  .example + .example-code {
+    margin-top: -2rem; }
+
+.example-column {
+  margin: 0 auto; }
+  .example-column > .card:last-of-type {
+    margin-bottom: 0; }
+
+.example-column-1 {
+  max-width: 20rem; }
+
+.example-column-2 {
+  max-width: 40rem; }
+
+.example-modal-backdrop {
+  background: #354052;
+  opacity: 0.24;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
+  height: 100%;
+  border-radius: 2px 2px 0 0; }
+
+@media not print {
+  .theme-dark .example-code {
+    border: 1px solid rgba(95, 102, 110, 0.2);
+    border-top: none; } }
+
+@media not print and (prefers-color-scheme: dark) {
+  .theme-dark-auto .example-code {
+    border: 1px solid rgba(95, 102, 110, 0.2);
+    border-top: none; } }
+
+.card-sponsor {
+  background: #dbe7f6 no-repeat center/100% 100%;
+  border-color: #548ed2;
+  min-height: 316px; }
+
+body.no-transitions * {
+  transition: none !important; }
+
+.toc-entry:before {
+  content: '- '; }
+
+.toc-entry ul {
+  list-style: none;
+  padding-left: 1rem; }
+
+.toc-entry a {
+  color: #5f666e; }
+
+.dropdown-menu-demo {
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  top: 0;
+  margin-bottom: 1rem; }
+
+.demo-icon-preview {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0; }
+  .demo-icon-preview svg {
+    width: 100%;
+    height: auto;
+    stroke-width: 1.5;
+    max-width: 15rem;
+    margin: 0 auto;
+    display: block; }
--- a/demo/dist/css/demo.min.css
+++ b/demo/dist/css/demo.min.css
@@ -0,0 +1,9 @@
+/*!
+* Tabler v1.0.0-alpha.8 (https://tabler.io)
+* @version 1.0.0-alpha.8
+* @link https://tabler.io
+* Copyright 2018-2020 The Tabler Authors
+* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+.highlight pre,pre.highlight{max-height:30rem;margin:1.5rem 0;overflow:auto;font-size:.75rem;background:#354052;border-radius:3px;color:#fff}.highlight pre::-webkit-scrollbar,pre.highlight::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.highlight pre::-webkit-scrollbar-thumb,pre.highlight::-webkit-scrollbar-thumb{border-radius:5px;background:0 0}.highlight pre::-webkit-scrollbar-corner,pre.highlight::-webkit-scrollbar-corner{background:0 0}.highlight pre:hover::-webkit-scrollbar-thumb,pre.highlight:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#5d6675}.highlight .c,.highlight .c1{color:#a0aec0}.highlight .na,.highlight .nl,.highlight .nx,.language-css .highlight .na,.language-scss .highlight .na{color:#ffe484}.highlight .dl,.highlight .mh,.highlight .s,.highlight .s1,.highlight .s2{color:#b5f4a5}.highlight .language-js .nb,.highlight .mi,.highlight .nc,.highlight .nd,.highlight .nt{color:#93ddfd}.highlight .language-html .nt,.highlight .nb{color:#ff8383}.highlight .k,.highlight .kd,.highlight .n,.highlight .nv{color:#d9a9ff}.example{padding:2rem;margin:2rem 0;border:1px solid rgba(95,102,110,.2);border-radius:3px 3px 0 0;position:relative;min-height:12rem;display:flex;align-items:center;overflow-x:auto}.example-centered{justify-content:center}.example-centered .example-content{flex:0 auto}.example-content{font-size:.875rem;flex:1;max-width:100%}.example-bg{background:#f5f7fb}.example-code{margin:2rem 0;border-top:none}.example-code pre{margin:0;border-radius:0 0 3px 3px}.example+.example-code{margin-top:-2rem}.example-column{margin:0 auto}.example-column>.card:last-of-type{margin-bottom:0}.example-column-1{max-width:20rem}.example-column-2{max-width:40rem}.example-modal-backdrop{background:#354052;opacity:.24;position:absolute;width:100%;left:0;top:0;height:100%;border-radius:2px 2px 0 0}@media not print{.theme-dark .example-code{border:1px solid rgba(95,102,110,.2);border-top:none}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto .example-code{border:1px solid rgba(95,102,110,.2);border-top:none}}.card-sponsor{background:#dbe7f6 no-repeat center/100% 100%;border-color:#548ed2;min-height:316px}body.no-transitions *{transition:none!important}.toc-entry:before{content:'- '}.toc-entry ul{list-style:none;padding-left:1rem}.toc-entry a{color:#5f666e}.dropdown-menu-demo{display:inline-block;width:100%;position:relative;top:0;margin-bottom:1rem}.demo-icon-preview{position:-webkit-sticky;position:sticky;top:0}.demo-icon-preview svg{width:100%;height:auto;stroke-width:1.5;max-width:15rem;margin:0 auto;display:block}
--- a/demo/dist/css/libs.css
+++ b/demo/dist/css/libs.css
@@ -0,0 +1,8 @@
+/*!
+* Tabler v1.0.0-alpha.8 (https://tabler.io)
+* @version 1.0.0-alpha.8
+* @link https://tabler.io
+* Copyright 2018-2020 The Tabler Authors
+* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
--- a/demo/dist/css/libs.min.css
+++ b/demo/dist/css/libs.min.css
@@ -0,0 +1,8 @@
+/*!
+* Tabler v1.0.0-alpha.8 (https://tabler.io)
+* @version 1.0.0-alpha.8
+* @link https://tabler.io
+* Copyright 2018-2020 The Tabler Authors
+* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
--- a/demo/dist/css/tabler-buttons.css
+++ b/demo/dist/css/tabler-buttons.css
--- a/demo/dist/css/tabler-buttons.css.map
+++ b/demo/dist/css/tabler-buttons.css.map
--- a/demo/dist/css/tabler-buttons.min.css
+++ b/demo/dist/css/tabler-buttons.min.css
--- a/demo/dist/css/tabler-buttons.min.css.map
+++ b/demo/dist/css/tabler-buttons.min.css.map
--- a/demo/dist/css/tabler-dark.css
+++ b/demo/dist/css/tabler-dark.css
@@ -1,66 +0,0 @@
-@media not print {
-  .theme-dark,
-  .theme-dark .modal-content,
-  .theme-dark .dropdown-menu,
-  .theme-dark .example-bg {
-    color: #afbdd1;
-    background: #222935; }
-  .theme-dark .card,
-  .theme-dark .sidebar,
-  .theme-dark .topbar {
-    color: inherit;
-    background: #303645; }
-  .theme-dark .text-body {
-    color: #afbdd1 !important; }
-  .theme-dark .avatar-list-stacked .avatar {
-    box-shadow: 0 0 0 2px #222226; }
-  .theme-dark .navbar-brand-logo {
-    -webkit-filter: brightness(0) invert(1);
-    filter: brightness(0) invert(1); }
-  .theme-dark .form-fieldset {
-    border-color: transparent; }
-  .theme-dark .form-control,
-  .theme-dark .form-select,
-  .theme-dark .form-check-input:not(:checked) {
-    background: transparent;
-    border-color: rgba(175, 189, 209, 0.4);
-    color: inherit; }
-  .theme-dark .input-group-text {
-    border-color: rgba(175, 189, 209, 0.4); }
-  .theme-dark .brand-logo {
-    -webkit-filter: brightness(0) invert(1);
-    filter: brightness(0) invert(1); } }
-
-@media not print and (prefers-color-scheme: dark) {
-  .auto-theme-dark,
-  .auto-theme-dark .modal-content,
-  .auto-theme-dark .dropdown-menu,
-  .auto-theme-dark .example-bg {
-    color: #afbdd1;
-    background: #222935; }
-  .auto-theme-dark .card,
-  .auto-theme-dark .sidebar,
-  .auto-theme-dark .topbar {
-    color: inherit;
-    background: #303645; }
-  .auto-theme-dark .text-body {
-    color: #afbdd1 !important; }
-  .auto-theme-dark .avatar-list-stacked .avatar {
-    box-shadow: 0 0 0 2px #222226; }
-  .auto-theme-dark .navbar-brand-logo {
-    -webkit-filter: brightness(0) invert(1);
-    filter: brightness(0) invert(1); }
-  .auto-theme-dark .form-fieldset {
-    border-color: transparent; }
-  .auto-theme-dark .form-control,
-  .auto-theme-dark .form-select,
-  .auto-theme-dark .form-check-input:not(:checked) {
-    background: transparent;
-    border-color: rgba(175, 189, 209, 0.4);
-    color: inherit; }
-  .auto-theme-dark .input-group-text {
-    border-color: rgba(175, 189, 209, 0.4); }
-  .auto-theme-dark .brand-logo {
-    -webkit-filter: brightness(0) invert(1);
-    filter: brightness(0) invert(1); } }
-/*# sourceMappingURL=tabler-dark.css.map */
--- a/demo/dist/css/tabler-dark.css.map
+++ b/demo/dist/css/tabler-dark.css.map
--- a/demo/dist/css/tabler-dark.min.css
+++ b/demo/dist/css/tabler-dark.min.css
@@ -1,2 +0,0 @@
-@media not print{.theme-dark,.theme-dark .dropdown-menu,.theme-dark .example-bg,.theme-dark .modal-content{color:#afbdd1;background:#222935}.theme-dark .card,.theme-dark .sidebar,.theme-dark .topbar{color:inherit;background:#303645}.theme-dark .text-body{color:#afbdd1!important}.theme-dark .avatar-list-stacked .avatar{box-shadow:0 0 0 2px #222226}.theme-dark .navbar-brand-logo{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}.theme-dark .form-fieldset{border-color:transparent}.theme-dark .form-check-input:not(:checked),.theme-dark .form-control,.theme-dark .form-select{background:0 0;border-color:rgba(175,189,209,.4);color:inherit}.theme-dark .input-group-text{border-color:rgba(175,189,209,.4)}.theme-dark .brand-logo{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}}@media not print and (prefers-color-scheme:dark){.auto-theme-dark,.auto-theme-dark .dropdown-menu,.auto-theme-dark .example-bg,.auto-theme-dark .modal-content{color:#afbdd1;background:#222935}.auto-theme-dark .card,.auto-theme-dark .sidebar,.auto-theme-dark .topbar{color:inherit;background:#303645}.auto-theme-dark .text-body{color:#afbdd1!important}.auto-theme-dark .avatar-list-stacked .avatar{box-shadow:0 0 0 2px #222226}.auto-theme-dark .navbar-brand-logo{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}.auto-theme-dark .form-fieldset{border-color:transparent}.auto-theme-dark .form-check-input:not(:checked),.auto-theme-dark .form-control,.auto-theme-dark .form-select{background:0 0;border-color:rgba(175,189,209,.4);color:inherit}.auto-theme-dark .input-group-text{border-color:rgba(175,189,209,.4)}.auto-theme-dark .brand-logo{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}}
-/*# sourceMappingURL=tabler-dark.min.css.map */
--- a/demo/dist/css/tabler-dark.min.css.map
+++ b/demo/dist/css/tabler-dark.min.css.map
--- a/demo/dist/css/tabler-flags.css
+++ b/demo/dist/css/tabler-flags.css
@@ -1,9 +1,11 @@
 /*!
- * Tabler Flags (v0.9.0)
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
+* Tabler v1.0.0-alpha.8 (https://tabler.io)
+* @version 1.0.0-alpha.8
+* @link https://tabler.io
+* Copyright 2018-2020 The Tabler Authors
+* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
 .flag {
  position: relative;
  display: inline-block;
@@ -13,7 +15,7 @@
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
-  border: 1px solid rgba(123, 126, 136, 0.24);
+  border: 1px solid rgba(95, 102, 110, 0.2);
  border-radius: 3px; }

 .flag-country-ad {
@@ -795,4 +797,3 @@
 .flag-xl {
  width: 5.33332rem;
  height: 4rem; }
-/*# sourceMappingURL=tabler-flags.css.map */
--- a/demo/dist/css/tabler-flags.css.map
+++ b/demo/dist/css/tabler-flags.css.map
--- a/demo/dist/css/tabler-flags.min.css
+++ b/demo/dist/css/tabler-flags.min.css
--- a/demo/dist/css/tabler-flags.min.css.map
+++ b/demo/dist/css/tabler-flags.min.css.map
--- a/demo/dist/css/tabler-payments.css
+++ b/demo/dist/css/tabler-payments.css
@@ -1,9 +1,11 @@
 /*!
- * Tabler Payments (v0.1.0)
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
+* Tabler v1.0.0-alpha.8 (https://tabler.io)
+* @version 1.0.0-alpha.8
+* @link https://tabler.io
+* Copyright 2018-2020 The Tabler Authors
+* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
 .payment {
  width: 3.33332rem;
  height: 2rem;
@@ -14,360 +16,360 @@
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 2px; }

-.payment-provider-2checkout-dark {
-  background-image: url("../img/payments/2checkout-dark.svg"); }
-
 .payment-provider-2checkout {
  background-image: url("../img/payments/2checkout.svg"); }

-.payment-provider-alipay-dark {
-  background-image: url("../img/payments/alipay-dark.svg"); }
+.payment-provider-2checkout-dark {
+  background-image: url("../img/payments/2checkout-dark.svg"); }

 .payment-provider-alipay {
  background-image: url("../img/payments/alipay.svg"); }

-.payment-provider-amazon-dark {
-  background-image: url("../img/payments/amazon-dark.svg"); }
+.payment-provider-alipay-dark {
+  background-image: url("../img/payments/alipay-dark.svg"); }

 .payment-provider-amazon {
  background-image: url("../img/payments/amazon.svg"); }

-.payment-provider-americanexpress-dark {
-  background-image: url("../img/payments/americanexpress-dark.svg"); }
+.payment-provider-amazon-dark {
+  background-image: url("../img/payments/amazon-dark.svg"); }

 .payment-provider-americanexpress {
  background-image: url("../img/payments/americanexpress.svg"); }

-.payment-provider-applepay-dark {
-  background-image: url("../img/payments/applepay-dark.svg"); }
+.payment-provider-americanexpress-dark {
+  background-image: url("../img/payments/americanexpress-dark.svg"); }

 .payment-provider-applepay {
  background-image: url("../img/payments/applepay.svg"); }

-.payment-provider-bancontact-dark {
-  background-image: url("../img/payments/bancontact-dark.svg"); }
+.payment-provider-applepay-dark {
+  background-image: url("../img/payments/applepay-dark.svg"); }

 .payment-provider-bancontact {
  background-image: url("../img/payments/bancontact.svg"); }

-.payment-provider-bitcoin-dark {
-  background-image: url("../img/payments/bitcoin-dark.svg"); }
+.payment-provider-bancontact-dark {
+  background-image: url("../img/payments/bancontact-dark.svg"); }

 .payment-provider-bitcoin {
  background-image: url("../img/payments/bitcoin.svg"); }

-.payment-provider-bitpay-dark {
-  background-image: url("../img/payments/bitpay-dark.svg"); }
+.payment-provider-bitcoin-dark {
+  background-image: url("../img/payments/bitcoin-dark.svg"); }

 .payment-provider-bitpay {
  background-image: url("../img/payments/bitpay.svg"); }

+.payment-provider-bitpay-dark {
+  background-image: url("../img/payments/bitpay-dark.svg"); }
+
 .payment-provider-blik {
  background-image: url("../img/payments/blik.svg"); }

 .payment-provider-blik-dark {
  background-image: url("../img/payments/blik-dark.svg"); }

-.payment-provider-cirrus-dark {
-  background-image: url("../img/payments/cirrus-dark.svg"); }
-
 .payment-provider-cirrus {
  background-image: url("../img/payments/cirrus.svg"); }

-.payment-provider-clickandbuy-dark {
-  background-image: url("../img/payments/clickandbuy-dark.svg"); }
+.payment-provider-cirrus-dark {
+  background-image: url("../img/payments/cirrus-dark.svg"); }

 .payment-provider-clickandbuy {
  background-image: url("../img/payments/clickandbuy.svg"); }

-.payment-provider-coinkite-dark {
-  background-image: url("../img/payments/coinkite-dark.svg"); }
+.payment-provider-clickandbuy-dark {
+  background-image: url("../img/payments/clickandbuy-dark.svg"); }

 .payment-provider-coinkite {
  background-image: url("../img/payments/coinkite.svg"); }

-.payment-provider-dinersclub-dark {
-  background-image: url("../img/payments/dinersclub-dark.svg"); }
+.payment-provider-coinkite-dark {
+  background-image: url("../img/payments/coinkite-dark.svg"); }

 .payment-provider-dinersclub {
  background-image: url("../img/payments/dinersclub.svg"); }

-.payment-provider-directdebit-dark {
-  background-image: url("../img/payments/directdebit-dark.svg"); }
+.payment-provider-dinersclub-dark {
+  background-image: url("../img/payments/dinersclub-dark.svg"); }

 .payment-provider-directdebit {
  background-image: url("../img/payments/directdebit.svg"); }

-.payment-provider-discover-dark {
-  background-image: url("../img/payments/discover-dark.svg"); }
+.payment-provider-directdebit-dark {
+  background-image: url("../img/payments/directdebit-dark.svg"); }

 .payment-provider-discover {
  background-image: url("../img/payments/discover.svg"); }

+.payment-provider-discover-dark {
+  background-image: url("../img/payments/discover-dark.svg"); }
+
 .payment-provider-dotpay {
  background-image: url("../img/payments/dotpay.svg"); }

 .payment-provider-dotpay-dark {
  background-image: url("../img/payments/dotpay-dark.svg"); }

-.payment-provider-dwolla-dark {
-  background-image: url("../img/payments/dwolla-dark.svg"); }
-
 .payment-provider-dwolla {
  background-image: url("../img/payments/dwolla.svg"); }

-.payment-provider-ebay-dark {
-  background-image: url("../img/payments/ebay-dark.svg"); }
+.payment-provider-dwolla-dark {
+  background-image: url("../img/payments/dwolla-dark.svg"); }

 .payment-provider-ebay {
  background-image: url("../img/payments/ebay.svg"); }

-.payment-provider-eway-dark {
-  background-image: url("../img/payments/eway-dark.svg"); }
+.payment-provider-ebay-dark {
+  background-image: url("../img/payments/ebay-dark.svg"); }

 .payment-provider-eway {
  background-image: url("../img/payments/eway.svg"); }

-.payment-provider-giropay-dark {
-  background-image: url("../img/payments/giropay-dark.svg"); }
+.payment-provider-eway-dark {
+  background-image: url("../img/payments/eway-dark.svg"); }

 .payment-provider-giropay {
  background-image: url("../img/payments/giropay.svg"); }

-.payment-provider-googlewallet-dark {
-  background-image: url("../img/payments/googlewallet-dark.svg"); }
+.payment-provider-giropay-dark {
+  background-image: url("../img/payments/giropay-dark.svg"); }

 .payment-provider-googlewallet {
  background-image: url("../img/payments/googlewallet.svg"); }

-.payment-provider-ingenico-dark {
-  background-image: url("../img/payments/ingenico-dark.svg"); }
+.payment-provider-googlewallet-dark {
+  background-image: url("../img/payments/googlewallet-dark.svg"); }

 .payment-provider-ingenico {
  background-image: url("../img/payments/ingenico.svg"); }

-.payment-provider-jcb-dark {
-  background-image: url("../img/payments/jcb-dark.svg"); }
+.payment-provider-ingenico-dark {
+  background-image: url("../img/payments/ingenico-dark.svg"); }

 .payment-provider-jcb {
  background-image: url("../img/payments/jcb.svg"); }

-.payment-provider-klarna-dark {
-  background-image: url("../img/payments/klarna-dark.svg"); }
+.payment-provider-jcb-dark {
+  background-image: url("../img/payments/jcb-dark.svg"); }

 .payment-provider-klarna {
  background-image: url("../img/payments/klarna.svg"); }

-.payment-provider-laser-dark {
-  background-image: url("../img/payments/laser-dark.svg"); }
+.payment-provider-klarna-dark {
+  background-image: url("../img/payments/klarna-dark.svg"); }

 .payment-provider-laser {
  background-image: url("../img/payments/laser.svg"); }

-.payment-provider-maestro-dark {
-  background-image: url("../img/payments/maestro-dark.svg"); }
+.payment-provider-laser-dark {
+  background-image: url("../img/payments/laser-dark.svg"); }

 .payment-provider-maestro {
  background-image: url("../img/payments/maestro.svg"); }

-.payment-provider-mastercard-dark {
-  background-image: url("../img/payments/mastercard-dark.svg"); }
+.payment-provider-maestro-dark {
+  background-image: url("../img/payments/maestro-dark.svg"); }

 .payment-provider-mastercard {
  background-image: url("../img/payments/mastercard.svg"); }

-.payment-provider-mir-dark {
-  background-image: url("../img/payments/mir-dark.svg"); }
+.payment-provider-mastercard-dark {
+  background-image: url("../img/payments/mastercard-dark.svg"); }

 .payment-provider-mir {
  background-image: url("../img/payments/mir.svg"); }

-.payment-provider-monero-dark {
-  background-image: url("../img/payments/monero-dark.svg"); }
+.payment-provider-mir-dark {
+  background-image: url("../img/payments/mir-dark.svg"); }

 .payment-provider-monero {
  background-image: url("../img/payments/monero.svg"); }

-.payment-provider-neteller-dark {
-  background-image: url("../img/payments/neteller-dark.svg"); }
+.payment-provider-monero-dark {
+  background-image: url("../img/payments/monero-dark.svg"); }

 .payment-provider-neteller {
  background-image: url("../img/payments/neteller.svg"); }

-.payment-provider-ogone-dark {
-  background-image: url("../img/payments/ogone-dark.svg"); }
+.payment-provider-neteller-dark {
+  background-image: url("../img/payments/neteller-dark.svg"); }

 .payment-provider-ogone {
  background-image: url("../img/payments/ogone.svg"); }

-.payment-provider-okpay-dark {
-  background-image: url("../img/payments/okpay-dark.svg"); }
+.payment-provider-ogone-dark {
+  background-image: url("../img/payments/ogone-dark.svg"); }

 .payment-provider-okpay {
  background-image: url("../img/payments/okpay.svg"); }

-.payment-provider-paybox-dark {
-  background-image: url("../img/payments/paybox-dark.svg"); }
+.payment-provider-okpay-dark {
+  background-image: url("../img/payments/okpay-dark.svg"); }

 .payment-provider-paybox {
  background-image: url("../img/payments/paybox.svg"); }

-.payment-provider-paymill-dark {
-  background-image: url("../img/payments/paymill-dark.svg"); }
+.payment-provider-paybox-dark {
+  background-image: url("../img/payments/paybox-dark.svg"); }

 .payment-provider-paymill {
  background-image: url("../img/payments/paymill.svg"); }

-.payment-provider-payone-dark {
-  background-image: url("../img/payments/payone-dark.svg"); }
+.payment-provider-paymill-dark {
+  background-image: url("../img/payments/paymill-dark.svg"); }

 .payment-provider-payone {
  background-image: url("../img/payments/payone.svg"); }

-.payment-provider-payoneer-dark {
-  background-image: url("../img/payments/payoneer-dark.svg"); }
+.payment-provider-payone-dark {
+  background-image: url("../img/payments/payone-dark.svg"); }

 .payment-provider-payoneer {
  background-image: url("../img/payments/payoneer.svg"); }

-.payment-provider-paypal-dark {
-  background-image: url("../img/payments/paypal-dark.svg"); }
+.payment-provider-payoneer-dark {
+  background-image: url("../img/payments/payoneer-dark.svg"); }

 .payment-provider-paypal {
  background-image: url("../img/payments/paypal.svg"); }

-.payment-provider-paysafecard-dark {
-  background-image: url("../img/payments/paysafecard-dark.svg"); }
+.payment-provider-paypal-dark {
+  background-image: url("../img/payments/paypal-dark.svg"); }

 .payment-provider-paysafecard {
  background-image: url("../img/payments/paysafecard.svg"); }

-.payment-provider-payu-dark {
-  background-image: url("../img/payments/payu-dark.svg"); }
+.payment-provider-paysafecard-dark {
+  background-image: url("../img/payments/paysafecard-dark.svg"); }

 .payment-provider-payu {
  background-image: url("../img/payments/payu.svg"); }

-.payment-provider-payza-dark {
-  background-image: url("../img/payments/payza-dark.svg"); }
+.payment-provider-payu-dark {
+  background-image: url("../img/payments/payu-dark.svg"); }

 .payment-provider-payza {
  background-image: url("../img/payments/payza.svg"); }

+.payment-provider-payza-dark {
+  background-image: url("../img/payments/payza-dark.svg"); }
+
 .payment-provider-przelewy24 {
  background-image: url("../img/payments/przelewy24.svg"); }

 .payment-provider-przelewy24-dark {
  background-image: url("../img/payments/przelewy24-dark.svg"); }

-.payment-provider-ripple-dark {
-  background-image: url("../img/payments/ripple-dark.svg"); }
-
 .payment-provider-ripple {
  background-image: url("../img/payments/ripple.svg"); }

-.payment-provider-sage-dark {
-  background-image: url("../img/payments/sage-dark.svg"); }
+.payment-provider-ripple-dark {
+  background-image: url("../img/payments/ripple-dark.svg"); }

 .payment-provider-sage {
  background-image: url("../img/payments/sage.svg"); }

-.payment-provider-sepa-dark {
-  background-image: url("../img/payments/sepa-dark.svg"); }
+.payment-provider-sage-dark {
+  background-image: url("../img/payments/sage-dark.svg"); }

 .payment-provider-sepa {
  background-image: url("../img/payments/sepa.svg"); }

-.payment-provider-shopify-dark {
-  background-image: url("../img/payments/shopify-dark.svg"); }
+.payment-provider-sepa-dark {
+  background-image: url("../img/payments/sepa-dark.svg"); }

 .payment-provider-shopify {
  background-image: url("../img/payments/shopify.svg"); }

-.payment-provider-skrill-dark {
-  background-image: url("../img/payments/skrill-dark.svg"); }
+.payment-provider-shopify-dark {
+  background-image: url("../img/payments/shopify-dark.svg"); }

 .payment-provider-skrill {
  background-image: url("../img/payments/skrill.svg"); }

-.payment-provider-solo-dark {
-  background-image: url("../img/payments/solo-dark.svg"); }
+.payment-provider-skrill-dark {
+  background-image: url("../img/payments/skrill-dark.svg"); }

 .payment-provider-solo {
  background-image: url("../img/payments/solo.svg"); }

-.payment-provider-square-dark {
-  background-image: url("../img/payments/square-dark.svg"); }
+.payment-provider-solo-dark {
+  background-image: url("../img/payments/solo-dark.svg"); }

 .payment-provider-square {
  background-image: url("../img/payments/square.svg"); }

-.payment-provider-stripe-dark {
-  background-image: url("../img/payments/stripe-dark.svg"); }
+.payment-provider-square-dark {
+  background-image: url("../img/payments/square-dark.svg"); }

 .payment-provider-stripe {
  background-image: url("../img/payments/stripe.svg"); }

-.payment-provider-switch-dark {
-  background-image: url("../img/payments/switch-dark.svg"); }
+.payment-provider-stripe-dark {
+  background-image: url("../img/payments/stripe-dark.svg"); }

 .payment-provider-switch {
  background-image: url("../img/payments/switch.svg"); }

+.payment-provider-switch-dark {
+  background-image: url("../img/payments/switch-dark.svg"); }
+
 .payment-provider-tpay {
  background-image: url("../img/payments/tpay.svg"); }

 .payment-provider-tpay-dark {
  background-image: url("../img/payments/tpay-dark.svg"); }

-.payment-provider-ukash-dark {
-  background-image: url("../img/payments/ukash-dark.svg"); }
-
 .payment-provider-ukash {
  background-image: url("../img/payments/ukash.svg"); }

-.payment-provider-unionpay-dark {
-  background-image: url("../img/payments/unionpay-dark.svg"); }
+.payment-provider-ukash-dark {
+  background-image: url("../img/payments/ukash-dark.svg"); }

 .payment-provider-unionpay {
  background-image: url("../img/payments/unionpay.svg"); }

-.payment-provider-verifone-dark {
-  background-image: url("../img/payments/verifone-dark.svg"); }
+.payment-provider-unionpay-dark {
+  background-image: url("../img/payments/unionpay-dark.svg"); }

 .payment-provider-verifone {
  background-image: url("../img/payments/verifone.svg"); }

-.payment-provider-verisign-dark {
-  background-image: url("../img/payments/verisign-dark.svg"); }
+.payment-provider-verifone-dark {
+  background-image: url("../img/payments/verifone-dark.svg"); }

 .payment-provider-verisign {
  background-image: url("../img/payments/verisign.svg"); }

-.payment-provider-visa-dark {
-  background-image: url("../img/payments/visa-dark.svg"); }
+.payment-provider-verisign-dark {
+  background-image: url("../img/payments/verisign-dark.svg"); }

 .payment-provider-visa {
  background-image: url("../img/payments/visa.svg"); }

-.payment-provider-webmoney-dark {
-  background-image: url("../img/payments/webmoney-dark.svg"); }
+.payment-provider-visa-dark {
+  background-image: url("../img/payments/visa-dark.svg"); }

 .payment-provider-webmoney {
  background-image: url("../img/payments/webmoney.svg"); }

-.payment-provider-westernunion-dark {
-  background-image: url("../img/payments/westernunion-dark.svg"); }
+.payment-provider-webmoney-dark {
+  background-image: url("../img/payments/webmoney-dark.svg"); }

 .payment-provider-westernunion {
  background-image: url("../img/payments/westernunion.svg"); }

-.payment-provider-worldpay-dark {
-  background-image: url("../img/payments/worldpay-dark.svg"); }
+.payment-provider-westernunion-dark {
+  background-image: url("../img/payments/westernunion-dark.svg"); }

 .payment-provider-worldpay {
  background-image: url("../img/payments/worldpay.svg"); }

+.payment-provider-worldpay-dark {
+  background-image: url("../img/payments/worldpay-dark.svg"); }
+
 .payment-sm {
  width: 2.49999rem;
  height: 1.5rem; }
@@ -379,4 +381,3 @@
 .payment-xl {
  width: 6.66664rem;
  height: 4rem; }
-/*# sourceMappingURL=tabler-payments.css.map */
--- a/demo/dist/css/tabler-payments.css.map
+++ b/demo/dist/css/tabler-payments.css.map
--- a/demo/dist/css/tabler-payments.min.css
+++ b/demo/dist/css/tabler-payments.min.css
--- a/demo/dist/css/tabler-payments.min.css.map
+++ b/demo/dist/css/tabler-payments.min.css.map
--- a/demo/dist/css/tabler-rtl.css
+++ b/demo/dist/css/tabler-rtl.css
@@ -1,16 +0,0 @@
-html[dir="rtl"] body {
-  text-align: right;
-  direction: rtl; }
-
-html[dir="rtl"] .hide-rtl {
-  display: none !important; }
-
-html[dir="rtl"] .show-rtl {
-  display: block !important; }
-
-html[dir="rtl"] .float-right {
-  float: left !important; }
-
-html[dir="rtl"] .float-left {
-  float: right !important; }
-/*# sourceMappingURL=tabler-rtl.css.map */
--- a/demo/dist/css/tabler-rtl.css.map
+++ b/demo/dist/css/tabler-rtl.css.map
--- a/demo/dist/css/tabler-rtl.min.css
+++ b/demo/dist/css/tabler-rtl.min.css
@@ -1,2 +0,0 @@
-html[dir=rtl] body{text-align:right;direction:rtl}html[dir=rtl] .hide-rtl{display:none!important}html[dir=rtl] .show-rtl{display:block!important}html[dir=rtl] .float-right{float:left!important}html[dir=rtl] .float-left{float:right!important}
-/*# sourceMappingURL=tabler-rtl.min.css.map */
--- a/demo/dist/css/tabler-rtl.min.css.map
+++ b/demo/dist/css/tabler-rtl.min.css.map
--- a/demo/dist/css/tabler.css
+++ b/demo/dist/css/tabler.css
--- a/demo/dist/css/tabler.css.map
+++ b/demo/dist/css/tabler.css.map
--- a/demo/dist/css/tabler.min.css
+++ b/demo/dist/css/tabler.min.css
--- a/demo/dist/css/tabler.min.css.map
+++ b/demo/dist/css/tabler.min.css.map
--- a/demo/dist/js/tabler-range-sliders.min.js
+++ b/demo/dist/js/tabler-range-sliders.min.js
@@ -1,6 +0,0 @@
-/*!
-  * Tabler v1.0.0-alpha.2 (https://tabler.io)
-  * Copyright 2018-2020 codecalm
-  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-  */'use strict';$(document).ready(function(){for(var a=document.querySelectorAll("[demo-slider]"),b=function(b){window[a[b].getAttribute("demo-slider")].on("update",function(c){a[b].innerHTML=c.join(" | ")})},c=0;c<a.length;c++)b(c)});
-//# sourceMappingURL=tabler-range-sliders.min.js.map
--- a/demo/dist/js/tabler-range-sliders.min.js.map
+++ b/demo/dist/js/tabler-range-sliders.min.js.map
--- a/demo/dist/js/tabler.js
+++ b/demo/dist/js/tabler.js
--- a/demo/dist/js/tabler.min.js
+++ b/demo/dist/js/tabler.min.js
--- a/demo/dist/js/tabler.min.js.map
+++ b/demo/dist/js/tabler.min.js.map
--- a/demo/dist/libs/apexcharts/dist/apexcharts.min.js
+++ b/demo/dist/libs/apexcharts/dist/apexcharts.min.js
--- a/demo/dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js
+++ b/demo/dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js
--- a/demo/dist/libs/countup.js/dist/countUp.js
+++ b/demo/dist/libs/countup.js/dist/countUp.js
@@ -0,0 +1,248 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+// playground: stackblitz.com/edit/countup-typescript
+var CountUp = /** @class */ (function () {
+    function CountUp(target, endVal, options) {
+        var _this = this;
+        this.target = target;
+        this.endVal = endVal;
+        this.options = options;
+        this.version = '2.0.7';
+        this.defaults = {
+            startVal: 0,
+            decimalPlaces: 0,
+            duration: 2,
+            useEasing: true,
+            useGrouping: true,
+            smartEasingThreshold: 999,
+            smartEasingAmount: 333,
+            separator: ',',
+            decimal: '.',
+            prefix: '',
+            suffix: ''
+        };
+        this.finalEndVal = null; // for smart easing
+        this.useEasing = true;
+        this.countDown = false;
+        this.error = '';
+        this.startVal = 0;
+        this.paused = true;
+        this.count = function (timestamp) {
+            if (!_this.startTime) {
+                _this.startTime = timestamp;
+            }
+            var progress = timestamp - _this.startTime;
+            _this.remaining = _this.duration - progress;
+            // to ease or not to ease
+            if (_this.useEasing) {
+                if (_this.countDown) {
+                    _this.frameVal = _this.startVal - _this.easingFn(progress, 0, _this.startVal - _this.endVal, _this.duration);
+                }
+                else {
+                    _this.frameVal = _this.easingFn(progress, _this.startVal, _this.endVal - _this.startVal, _this.duration);
+                }
+            }
+            else {
+                if (_this.countDown) {
+                    _this.frameVal = _this.startVal - ((_this.startVal - _this.endVal) * (progress / _this.duration));
+                }
+                else {
+                    _this.frameVal = _this.startVal + (_this.endVal - _this.startVal) * (progress / _this.duration);
+                }
+            }
+            // don't go past endVal since progress can exceed duration in the last frame
+            if (_this.countDown) {
+                _this.frameVal = (_this.frameVal < _this.endVal) ? _this.endVal : _this.frameVal;
+            }
+            else {
+                _this.frameVal = (_this.frameVal > _this.endVal) ? _this.endVal : _this.frameVal;
+            }
+            // decimal
+            _this.frameVal = Number(_this.frameVal.toFixed(_this.options.decimalPlaces));
+            // format and print value
+            _this.printValue(_this.frameVal);
+            // whether to continue
+            if (progress < _this.duration) {
+                _this.rAF = requestAnimationFrame(_this.count);
+            }
+            else if (_this.finalEndVal !== null) {
+                // smart easing
+                _this.update(_this.finalEndVal);
+            }
+            else {
+                if (_this.callback) {
+                    _this.callback();
+                }
+            }
+        };
+        // default format and easing functions
+        this.formatNumber = function (num) {
+            var neg = (num < 0) ? '-' : '';
+            var result, x, x1, x2, x3;
+            result = Math.abs(num).toFixed(_this.options.decimalPlaces);
+            result += '';
+            x = result.split('.');
+            x1 = x[0];
+            x2 = x.length > 1 ? _this.options.decimal + x[1] : '';
+            if (_this.options.useGrouping) {
+                x3 = '';
+                for (var i = 0, len = x1.length; i < len; ++i) {
+                    if (i !== 0 && (i % 3) === 0) {
+                        x3 = _this.options.separator + x3;
+                    }
+                    x3 = x1[len - i - 1] + x3;
+                }
+                x1 = x3;
+            }
+            // optional numeral substitution
+            if (_this.options.numerals && _this.options.numerals.length) {
+                x1 = x1.replace(/[0-9]/g, function (w) { return _this.options.numerals[+w]; });
+                x2 = x2.replace(/[0-9]/g, function (w) { return _this.options.numerals[+w]; });
+            }
+            return neg + _this.options.prefix + x1 + x2 + _this.options.suffix;
+        };
+        this.easeOutExpo = function (t, b, c, d) {
+            return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
+        };
+        this.options = __assign(__assign({}, this.defaults), options);
+        this.formattingFn = (this.options.formattingFn) ?
+            this.options.formattingFn : this.formatNumber;
+        this.easingFn = (this.options.easingFn) ?
+            this.options.easingFn : this.easeOutExpo;
+        this.startVal = this.validateValue(this.options.startVal);
+        this.frameVal = this.startVal;
+        this.endVal = this.validateValue(endVal);
+        this.options.decimalPlaces = Math.max(0 || this.options.decimalPlaces);
+        this.resetDuration();
+        this.options.separator = String(this.options.separator);
+        this.useEasing = this.options.useEasing;
+        if (this.options.separator === '') {
+            this.options.useGrouping = false;
+        }
+        this.el = (typeof target === 'string') ? document.getElementById(target) : target;
+        if (this.el) {
+            this.printValue(this.startVal);
+        }
+        else {
+            this.error = '[CountUp] target is null or undefined';
+        }
+    }
+    // determines where easing starts and whether to count down or up
+    CountUp.prototype.determineDirectionAndSmartEasing = function () {
+        var end = (this.finalEndVal) ? this.finalEndVal : this.endVal;
+        this.countDown = (this.startVal > end);
+        var animateAmount = end - this.startVal;
+        if (Math.abs(animateAmount) > this.options.smartEasingThreshold) {
+            this.finalEndVal = end;
+            var up = (this.countDown) ? 1 : -1;
+            this.endVal = end + (up * this.options.smartEasingAmount);
+            this.duration = this.duration / 2;
+        }
+        else {
+            this.endVal = end;
+            this.finalEndVal = null;
+        }
+        if (this.finalEndVal) {
+            this.useEasing = false;
+        }
+        else {
+            this.useEasing = this.options.useEasing;
+        }
+    };
+    // start animation
+    CountUp.prototype.start = function (callback) {
+        if (this.error) {
+            return;
+        }
+        this.callback = callback;
+        if (this.duration > 0) {
+            this.determineDirectionAndSmartEasing();
+            this.paused = false;
+            this.rAF = requestAnimationFrame(this.count);
+        }
+        else {
+            this.printValue(this.endVal);
+        }
+    };
+    // pause/resume animation
+    CountUp.prototype.pauseResume = function () {
+        if (!this.paused) {
+            cancelAnimationFrame(this.rAF);
+        }
+        else {
+            this.startTime = null;
+            this.duration = this.remaining;
+            this.startVal = this.frameVal;
+            this.determineDirectionAndSmartEasing();
+            this.rAF = requestAnimationFrame(this.count);
+        }
+        this.paused = !this.paused;
+    };
+    // reset to startVal so animation can be run again
+    CountUp.prototype.reset = function () {
+        cancelAnimationFrame(this.rAF);
+        this.paused = true;
+        this.resetDuration();
+        this.startVal = this.validateValue(this.options.startVal);
+        this.frameVal = this.startVal;
+        this.printValue(this.startVal);
+    };
+    // pass a new endVal and start animation
+    CountUp.prototype.update = function (newEndVal) {
+        cancelAnimationFrame(this.rAF);
+        this.startTime = null;
+        this.endVal = this.validateValue(newEndVal);
+        if (this.endVal === this.frameVal) {
+            return;
+        }
+        this.startVal = this.frameVal;
+        if (!this.finalEndVal) {
+            this.resetDuration();
+        }
+        this.finalEndVal = null;
+        this.determineDirectionAndSmartEasing();
+        this.rAF = requestAnimationFrame(this.count);
+    };
+    CountUp.prototype.printValue = function (val) {
+        var result = this.formattingFn(val);
+        if (this.el.tagName === 'INPUT') {
+            var input = this.el;
+            input.value = result;
+        }
+        else if (this.el.tagName === 'text' || this.el.tagName === 'tspan') {
+            this.el.textContent = result;
+        }
+        else {
+            this.el.innerHTML = result;
+        }
+    };
+    CountUp.prototype.ensureNumber = function (n) {
+        return (typeof n === 'number' && !isNaN(n));
+    };
+    CountUp.prototype.validateValue = function (value) {
+        var newValue = Number(value);
+        if (!this.ensureNumber(newValue)) {
+            this.error = "[CountUp] invalid start or end value: " + value;
+            return null;
+        }
+        else {
+            return newValue;
+        }
+    };
+    CountUp.prototype.resetDuration = function () {
+        this.startTime = null;
+        this.duration = Number(this.options.duration) * 1000;
+        this.remaining = this.duration;
+    };
+    return CountUp;
+}());
+export { CountUp };
--- a/demo/dist/libs/flatpickr/dist/flatpickr.min.css
+++ b/demo/dist/libs/flatpickr/dist/flatpickr.min.css
--- a/demo/dist/libs/flatpickr/dist/flatpickr.min.js
+++ b/demo/dist/libs/flatpickr/dist/flatpickr.min.js
--- a/demo/dist/libs/flatpickr/dist/plugins/rangePlugin.js
+++ b/demo/dist/libs/flatpickr/dist/plugins/rangePlugin.js
@@ -1,146 +1,169 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-  typeof define === 'function' && define.amd ? define(factory) :
-  (global = global || self, global.rangePlugin = factory());
-}(this, function () { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = global || self, global.rangePlugin = factory());
+}(this, (function () { 'use strict';

-  function rangePlugin(config) {
-      if (config === void 0) { config = {}; }
-      return function (fp) {
-          var dateFormat = "", secondInput, _secondInputFocused, _prevDates;
-          var createSecondInput = function () {
-              if (config.input) {
-                  secondInput =
-                      config.input instanceof Element
-                          ? config.input
-                          : window.document.querySelector(config.input);
-                  if (!secondInput) {
-                      fp.config.errorHandler(new Error("Invalid input element specified"));
-                      return;
-                  }
-                  if (fp.config.wrap) {
-                      secondInput = secondInput.querySelector("[data-input]");
-                  }
-              }
-              else {
-                  secondInput = fp._input.cloneNode();
-                  secondInput.removeAttribute("id");
-                  secondInput._flatpickr = undefined;
-              }
-              if (secondInput.value) {
-                  var parsedDate = fp.parseDate(secondInput.value);
-                  if (parsedDate)
-                      fp.selectedDates.push(parsedDate);
-              }
-              secondInput.setAttribute("data-fp-omit", "");
-              fp._bind(secondInput, ["focus", "click"], function () {
-                  if (fp.selectedDates[1]) {
-                      fp.latestSelectedDateObj = fp.selectedDates[1];
-                      fp._setHoursFromDate(fp.selectedDates[1]);
-                      fp.jumpToDate(fp.selectedDates[1]);
-                  }
-                  _secondInputFocused = true;
-                  fp.isOpen = false;
-                  fp.open(undefined, config.position === "left" ? fp._input : secondInput);
-              });
-              fp._bind(fp._input, ["focus", "click"], function (e) {
-                  e.preventDefault();
-                  fp.isOpen = false;
-                  fp.open();
-              });
-              if (fp.config.allowInput)
-                  fp._bind(secondInput, "keydown", function (e) {
-                      if (e.key === "Enter") {
-                          fp.setDate([fp.selectedDates[0], secondInput.value], true, dateFormat);
-                          secondInput.click();
-                      }
-                  });
-              if (!config.input)
-                  fp._input.parentNode &&
-                      fp._input.parentNode.insertBefore(secondInput, fp._input.nextSibling);
-          };
-          var plugin = {
-              onParseConfig: function () {
-                  fp.config.mode = "range";
-                  dateFormat = fp.config.altInput
-                      ? fp.config.altFormat
-                      : fp.config.dateFormat;
-              },
-              onReady: function () {
-                  createSecondInput();
-                  fp.config.ignoredFocusElements.push(secondInput);
-                  if (fp.config.allowInput) {
-                      fp._input.removeAttribute("readonly");
-                      secondInput.removeAttribute("readonly");
-                  }
-                  else {
-                      secondInput.setAttribute("readonly", "readonly");
-                  }
-                  fp._bind(fp._input, "focus", function () {
-                      fp.latestSelectedDateObj = fp.selectedDates[0];
-                      fp._setHoursFromDate(fp.selectedDates[0]);
-                      _secondInputFocused = false;
-                      fp.jumpToDate(fp.selectedDates[0]);
-                  });
-                  if (fp.config.allowInput)
-                      fp._bind(fp._input, "keydown", function (e) {
-                          if (e.key === "Enter")
-                              fp.setDate([fp._input.value, fp.selectedDates[1]], true, dateFormat);
-                      });
-                  fp.setDate(fp.selectedDates, false);
-                  plugin.onValueUpdate(fp.selectedDates);
-                  fp.loadedPlugins.push("range");
-              },
-              onPreCalendarPosition: function () {
-                  if (_secondInputFocused) {
-                      fp._positionElement = secondInput;
-                      setTimeout(function () {
-                          fp._positionElement = fp._input;
-                      }, 0);
-                  }
-              },
-              onChange: function () {
-                  if (!fp.selectedDates.length) {
-                      setTimeout(function () {
-                          if (fp.selectedDates.length)
-                              return;
-                          secondInput.value = "";
-                          _prevDates = [];
-                      }, 10);
-                  }
-                  if (_secondInputFocused) {
-                      setTimeout(function () {
-                          secondInput.focus();
-                      }, 0);
-                  }
-              },
-              onDestroy: function () {
-                  if (!config.input)
-                      secondInput.parentNode &&
-                          secondInput.parentNode.removeChild(secondInput);
-              },
-              onValueUpdate: function (selDates) {
-                  var _a, _b, _c;
-                  if (!secondInput)
-                      return;
-                  _prevDates =
-                      !_prevDates || selDates.length >= _prevDates.length
-                          ? selDates.slice() : _prevDates;
-                  if (_prevDates.length > selDates.length) {
-                      var newSelectedDate = selDates[0];
-                      var newDates = _secondInputFocused
-                          ? [_prevDates[0], newSelectedDate]
-                          : [newSelectedDate, _prevDates[1]];
-                      fp.setDate(newDates, false);
-                      _prevDates = newDates.slice();
-                  }
-                  _a = fp.selectedDates.map(function (d) { return fp.formatDate(d, dateFormat); }), _b = _a[0], fp._input.value = _b === void 0 ? "" : _b, _c = _a[1], secondInput.value = _c === void 0 ? "" : _c;
-              }
-          };
-          return plugin;
-      };
-  }
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.

-  return rangePlugin;
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.

-}));
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+
+    function rangePlugin(config) {
+        if (config === void 0) { config = {}; }
+        return function (fp) {
+            var dateFormat = "", secondInput, _secondInputFocused, _prevDates;
+            var createSecondInput = function () {
+                if (config.input) {
+                    secondInput =
+                        config.input instanceof Element
+                            ? config.input
+                            : window.document.querySelector(config.input);
+                    if (!secondInput) {
+                        fp.config.errorHandler(new Error("Invalid input element specified"));
+                        return;
+                    }
+                    if (fp.config.wrap) {
+                        secondInput = secondInput.querySelector("[data-input]");
+                    }
+                }
+                else {
+                    secondInput = fp._input.cloneNode();
+                    secondInput.removeAttribute("id");
+                    secondInput._flatpickr = undefined;
+                }
+                if (secondInput.value) {
+                    var parsedDate = fp.parseDate(secondInput.value);
+                    if (parsedDate)
+                        fp.selectedDates.push(parsedDate);
+                }
+                secondInput.setAttribute("data-fp-omit", "");
+                fp._bind(secondInput, ["focus", "click"], function () {
+                    if (fp.selectedDates[1]) {
+                        fp.latestSelectedDateObj = fp.selectedDates[1];
+                        fp._setHoursFromDate(fp.selectedDates[1]);
+                        fp.jumpToDate(fp.selectedDates[1]);
+                    }
+                    _secondInputFocused = true;
+                    fp.isOpen = false;
+                    fp.open(undefined, config.position === "left" ? fp._input : secondInput);
+                });
+                fp._bind(fp._input, ["focus", "click"], function (e) {
+                    e.preventDefault();
+                    fp.isOpen = false;
+                    fp.open();
+                });
+                if (fp.config.allowInput)
+                    fp._bind(secondInput, "keydown", function (e) {
+                        if (e.key === "Enter") {
+                            fp.setDate([fp.selectedDates[0], secondInput.value], true, dateFormat);
+                            secondInput.click();
+                        }
+                    });
+                if (!config.input)
+                    fp._input.parentNode &&
+                        fp._input.parentNode.insertBefore(secondInput, fp._input.nextSibling);
+            };
+            var plugin = {
+                onParseConfig: function () {
+                    fp.config.mode = "range";
+                    dateFormat = fp.config.altInput
+                        ? fp.config.altFormat
+                        : fp.config.dateFormat;
+                },
+                onReady: function () {
+                    createSecondInput();
+                    fp.config.ignoredFocusElements.push(secondInput);
+                    if (fp.config.allowInput) {
+                        fp._input.removeAttribute("readonly");
+                        secondInput.removeAttribute("readonly");
+                    }
+                    else {
+                        secondInput.setAttribute("readonly", "readonly");
+                    }
+                    fp._bind(fp._input, "focus", function () {
+                        fp.latestSelectedDateObj = fp.selectedDates[0];
+                        fp._setHoursFromDate(fp.selectedDates[0]);
+                        _secondInputFocused = false;
+                        fp.jumpToDate(fp.selectedDates[0]);
+                    });
+                    if (fp.config.allowInput)
+                        fp._bind(fp._input, "keydown", function (e) {
+                            if (e.key === "Enter")
+                                fp.setDate([fp._input.value, fp.selectedDates[1]], true, dateFormat);
+                        });
+                    fp.setDate(fp.selectedDates, false);
+                    plugin.onValueUpdate(fp.selectedDates);
+                    fp.loadedPlugins.push("range");
+                },
+                onPreCalendarPosition: function () {
+                    if (_secondInputFocused) {
+                        fp._positionElement = secondInput;
+                        setTimeout(function () {
+                            fp._positionElement = fp._input;
+                        }, 0);
+                    }
+                },
+                onChange: function () {
+                    if (!fp.selectedDates.length) {
+                        setTimeout(function () {
+                            if (fp.selectedDates.length)
+                                return;
+                            secondInput.value = "";
+                            _prevDates = [];
+                        }, 10);
+                    }
+                    if (_secondInputFocused) {
+                        setTimeout(function () {
+                            secondInput.focus();
+                        }, 0);
+                    }
+                },
+                onDestroy: function () {
+                    if (!config.input)
+                        secondInput.parentNode &&
+                            secondInput.parentNode.removeChild(secondInput);
+                },
+                onValueUpdate: function (selDates) {
+                    var _a, _b, _c;
+                    if (!secondInput)
+                        return;
+                    _prevDates =
+                        !_prevDates || selDates.length >= _prevDates.length
+                            ? __spreadArrays(selDates) : _prevDates;
+                    if (_prevDates.length > selDates.length) {
+                        var newSelectedDate = selDates[0];
+                        var newDates = _secondInputFocused
+                            ? [_prevDates[0], newSelectedDate]
+                            : [newSelectedDate, _prevDates[1]];
+                        fp.setDate(newDates, false);
+                        _prevDates = __spreadArrays(newDates);
+                    }
+                    _a = fp.selectedDates.map(function (d) { return fp.formatDate(d, dateFormat); }), _b = _a[0], fp._input.value = _b === void 0 ? "" : _b, _c = _a[1], secondInput.value = _c === void 0 ? "" : _c;
+                },
+            };
+            return plugin;
+        };
+    }
+
+    return rangePlugin;
+
+})));
--- a/demo/dist/libs/fullcalendar/core/main.min.css
+++ b/demo/dist/libs/fullcalendar/core/main.min.css
--- a/demo/dist/libs/fullcalendar/core/main.min.js
+++ b/demo/dist/libs/fullcalendar/core/main.min.js
--- a/demo/dist/libs/fullcalendar/daygrid/main.min.css
+++ b/demo/dist/libs/fullcalendar/daygrid/main.min.css
@@ -1 +1 @@
-.fc-dayGridDay-view .fc-content-skeleton,.fc-dayGridWeek-view .fc-content-skeleton{padding-bottom:1em}.fc-dayGrid-view .fc-body .fc-row{min-height:4em}.fc-row.fc-rigid{overflow:hidden}.fc-row.fc-rigid .fc-content-skeleton{position:absolute;top:0;left:0;right:0}.fc-day-top.fc-other-month{opacity:.3}.fc-dayGrid-view .fc-day-number,.fc-dayGrid-view .fc-week-number{padding:2px}.fc-dayGrid-view th.fc-day-number,.fc-dayGrid-view th.fc-week-number{padding:0 2px}.fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number{float:right}.fc-rtl .fc-dayGrid-view .fc-day-top .fc-day-number{float:left}.fc-ltr .fc-dayGrid-view .fc-day-top .fc-week-number{float:left;border-radius:0 0 3px}.fc-rtl .fc-dayGrid-view .fc-day-top .fc-week-number{float:right;border-radius:0 0 0 3px}.fc-dayGrid-view .fc-day-top .fc-week-number{min-width:1.5em;text-align:center;background-color:#f2f2f2;color:grey}.fc-dayGrid-view td.fc-week-number{text-align:center}.fc-dayGrid-view td.fc-week-number>*{display:inline-block;min-width:1.25em}
+:root{--fc-daygrid-event-dot-width:8px}.fc .fc-popover{position:fixed;top:0;box-shadow:0 2px 6px rgba(0,0,0,.15)}.fc .fc-popover-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:3px 4px}.fc .fc-popover-title{margin:0 2px}.fc .fc-popover-close{cursor:pointer;opacity:.65;font-size:1.1em}.fc-theme-standard .fc-popover{border:1px solid #ddd;border:1px solid var(--fc-border-color,#ddd);background:var(--fc-page-bg-color,#fff)}.fc-theme-standard .fc-popover-header{background:rgba(208,208,208,.3);background:var(--fc-neutral-bg-color,rgba(208,208,208,.3))}.fc-daygrid-day-events:after,.fc-daygrid-day-events:before,.fc-daygrid-day-frame:after,.fc-daygrid-day-frame:before,.fc-daygrid-event-harness:after,.fc-daygrid-event-harness:before{content:"";clear:both;display:table}.fc .fc-daygrid-body{position:relative;z-index:1}.fc .fc-daygrid-day.fc-day-today{background-color:rgba(255,220,40,.15);background-color:var(--fc-today-bg-color,rgba(255,220,40,.15))}.fc .fc-daygrid-day-frame{position:relative;min-height:100%}.fc .fc-daygrid-day-top{display:flex;flex-direction:row-reverse}.fc .fc-day-other .fc-daygrid-day-top{opacity:.3}.fc .fc-daygrid-day-number{position:relative;z-index:4;padding:4px}.fc .fc-daygrid-day-events{margin-top:1px}.fc .fc-daygrid-body-balanced .fc-daygrid-day-events{position:absolute;left:0;right:0}.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events{position:relative;min-height:2em}.fc .fc-daygrid-body-natural .fc-daygrid-day-events{margin-bottom:1em}.fc .fc-daygrid-event-harness{position:relative}.fc .fc-daygrid-event-harness-abs{position:absolute;top:0;left:0;right:0}.fc .fc-daygrid-bg-harness{position:absolute;top:0;bottom:0}.fc .fc-daygrid-day-bg .fc-non-business{z-index:1}.fc .fc-daygrid-day-bg .fc-bg-event{z-index:2}.fc .fc-daygrid-day-bg .fc-highlight{z-index:3}.fc .fc-daygrid-event{z-index:6;margin-top:1px}.fc .fc-daygrid-event.fc-event-mirror{z-index:7}.fc .fc-daygrid-day-bottom{font-size:.85em;margin:2px 3px 0}.fc .fc-daygrid-more-link{position:relative;z-index:4;cursor:pointer}.fc .fc-daygrid-week-number{position:absolute;z-index:5;top:0;padding:2px;min-width:1.5em;text-align:center;background-color:rgba(208,208,208,.3);background-color:var(--fc-neutral-bg-color,rgba(208,208,208,.3));color:grey;color:var(--fc-neutral-text-color,grey)}.fc .fc-more-popover{z-index:8}.fc .fc-more-popover .fc-popover-body{min-width:220px;padding:10px}.fc-direction-ltr .fc-daygrid-event.fc-event-start,.fc-direction-rtl .fc-daygrid-event.fc-event-end{margin-left:2px}.fc-direction-ltr .fc-daygrid-event.fc-event-end,.fc-direction-rtl .fc-daygrid-event.fc-event-start{margin-right:2px}.fc-direction-ltr .fc-daygrid-week-number{left:0;border-radius:0 0 3px}.fc-direction-rtl .fc-daygrid-week-number{right:0;border-radius:0 0 0 3px}.fc-liquid-hack .fc-daygrid-day-frame{position:static}.fc-daygrid-event{position:relative;white-space:nowrap;border-radius:3px;font-size:.85em;font-size:var(--fc-small-font-size,.85em)}.fc-daygrid-block-event .fc-event-time{font-weight:700}.fc-daygrid-block-event .fc-event-time,.fc-daygrid-block-event .fc-event-title{padding:1px}.fc-daygrid-dot-event{display:flex;align-items:center;padding:2px 0}.fc-daygrid-dot-event .fc-event-title{flex-grow:1;flex-shrink:1;min-width:0;overflow:hidden;font-weight:700}.fc-daygrid-dot-event.fc-event-mirror,.fc-daygrid-dot-event:hover{background:rgba(0,0,0,.1)}.fc-daygrid-dot-event.fc-event-selected:before{top:-10px;bottom:-10px}.fc-daygrid-event-dot{margin:0 4px;box-sizing:content-box;width:0;height:0;border:4px solid #3788d8;border:calc(var(--fc-daygrid-event-dot-width,8px)/ 2) solid var(--fc-event-border-color,#3788d8);border-radius:4px;border-radius:calc(var(--fc-daygrid-event-dot-width,8px)/ 2)}.fc-direction-ltr .fc-daygrid-event .fc-event-time{margin-right:3px}.fc-direction-rtl .fc-daygrid-event .fc-event-time{margin-left:3px}
--- a/demo/dist/libs/fullcalendar/daygrid/main.min.js
+++ b/demo/dist/libs/fullcalendar/daygrid/main.min.js
--- a/demo/dist/libs/fullcalendar/interaction/main.min.js
+++ b/demo/dist/libs/fullcalendar/interaction/main.min.js
--- a/demo/dist/libs/fullcalendar/list/main.min.css
+++ b/demo/dist/libs/fullcalendar/list/main.min.css
@@ -1 +1 @@
-.fc-event-dot{display:inline-block;width:10px;height:10px;border-radius:5px}.fc-rtl .fc-list-view{direction:rtl}.fc-list-view{border-width:1px;border-style:solid}.fc .fc-list-table{table-layout:auto}.fc-list-table td{border-width:1px 0 0;padding:8px 14px}.fc-list-table tr:first-child td{border-top-width:0}.fc-list-heading{border-bottom-width:1px}.fc-list-heading td{font-weight:700}.fc-ltr .fc-list-heading-main{float:left}.fc-ltr .fc-list-heading-alt,.fc-rtl .fc-list-heading-main{float:right}.fc-rtl .fc-list-heading-alt{float:left}.fc-list-item.fc-has-url{cursor:pointer}.fc-list-item-marker,.fc-list-item-time{white-space:nowrap;width:1px}.fc-ltr .fc-list-item-marker{padding-right:0}.fc-rtl .fc-list-item-marker{padding-left:0}.fc-list-item-title a{text-decoration:none;color:inherit}.fc-list-item-title a[href]:hover{text-decoration:underline}.fc-list-empty-wrap2{position:absolute;top:0;left:0;right:0;bottom:0}.fc-list-empty-wrap1{width:100%;height:100%;display:table}.fc-list-empty{display:table-cell;vertical-align:middle;text-align:center}.fc-unthemed .fc-list-empty{background-color:#eee}
+:root{--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5}.fc-theme-standard .fc-list{border:1px solid #ddd;border:1px solid var(--fc-border-color,#ddd)}.fc .fc-list-empty{background-color:rgba(208,208,208,.3);background-color:var(--fc-neutral-bg-color,rgba(208,208,208,.3));height:100%;display:flex;justify-content:center;align-items:center}.fc .fc-list-empty-cushion{margin:5em 0}.fc .fc-list-table{width:100%;border-style:hidden}.fc .fc-list-table tr>*{border-left:0;border-right:0}.fc .fc-list-sticky .fc-list-day>*{position:-webkit-sticky;position:sticky;top:0;background:var(--fc-page-bg-color,#fff)}.fc .fc-list-table th{padding:0}.fc .fc-list-day-cushion,.fc .fc-list-table td{padding:8px 14px}.fc .fc-list-day-cushion:after{content:"";clear:both;display:table}.fc-theme-standard .fc-list-day-cushion{background-color:rgba(208,208,208,.3);background-color:var(--fc-neutral-bg-color,rgba(208,208,208,.3))}.fc-direction-ltr .fc-list-day-text,.fc-direction-rtl .fc-list-day-side-text{float:left}.fc-direction-ltr .fc-list-day-side-text,.fc-direction-rtl .fc-list-day-text{float:right}.fc-direction-ltr .fc-list-table .fc-list-event-graphic{padding-right:0}.fc-direction-rtl .fc-list-table .fc-list-event-graphic{padding-left:0}.fc .fc-list-event.fc-event-forced-url{cursor:pointer}.fc .fc-list-event:hover td{background-color:#f5f5f5;background-color:var(--fc-list-event-hover-bg-color,#f5f5f5)}.fc .fc-list-event-graphic,.fc .fc-list-event-time{white-space:nowrap;width:1px}.fc .fc-list-event-dot{display:inline-block;box-sizing:content-box;width:0;height:0;border:5px solid #3788d8;border:calc(var(--fc-list-event-dot-width,10px)/ 2) solid var(--fc-event-border-color,#3788d8);border-radius:5px;border-radius:calc(var(--fc-list-event-dot-width,10px)/ 2)}.fc .fc-list-event-title a{color:inherit;text-decoration:none}.fc .fc-list-event.fc-event-forced-url:hover a{text-decoration:underline}
--- a/demo/dist/libs/fullcalendar/list/main.min.js
+++ b/demo/dist/libs/fullcalendar/list/main.min.js
--- a/demo/dist/libs/fullcalendar/timegrid/main.min.css
+++ b/demo/dist/libs/fullcalendar/timegrid/main.min.css
--- a/Show More
+++ b/Show More