icons fixes

chart moved to chart page
Social referrals chart
2025-12-23 02:14:26 +04:00 · 2020-04-20 23:12:55 +02:00 · 2020-04-20 23:00:33 +02:00 · 2020-04-20 22:59:31 +02:00 · 2020-04-20 22:03:36 +02:00 · 2020-04-20 22:00:09 +02:00
1170 changed files with 129828 additions and 86583 deletions
--- 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/.gitignore
+++ b/.gitignore
@@ -1,5 +1,4 @@
 node_modules/
-/package-lock.json
 .idea/
 /db.json
 .jekyll-metadata
@@ -8,7 +7,6 @@ node_modules/
 /tmp-dist/
 /yarn.lock
 .DS_Store
-/Gemfile.lock
 /_site/
 /.cache/

@@ -20,3 +18,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.0"

 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,89 @@
+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.6)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7)
+    ffi (1.12.2)
+    forwardable-extended (2.6.0)
+    htmlbeautifier (1.3.1)
+    htmlcompressor (0.4.0)
+    http_parser.rb (0.6.0)
+    i18n (1.8.2)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.0.0)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (>= 0.9.5, < 2)
+      jekyll-sass-converter (~> 2.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.1)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      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.13.1)
+      jekyll (>= 3.7)
+      nokogiri (~> 1.9)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.1.0)
+    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.3.6)
+    mini_i18n (0.8.0)
+    mini_portile2 (2.4.0)
+    nokogiri (1.10.9)
+      mini_portile2 (~> 2.4.0)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (4.0.3)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rouge (3.17.0)
+    safe_yaml (1.0.5)
+    sassc (2.2.1)
+      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.0)
+  jekyll-random
+  jekyll-redirect-from
+  jekyll-tidy
+  jekyll-timeago
+  jekyll-toc
+
+BUNDLED WITH
+   1.17.3
--- a/README.md
+++ b/README.md
@@ -2,22 +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>

+[![Backers on Open Collective](https://opencollective.com/tabler/backers/badge.svg)](#backers)
+ [![Sponsors on Open Collective](https://opencollective.com/tabler/sponsors/badge.svg)](#sponsors)
+
+
 ## Features

 We've created this admin panel for everyone who wants to create templates based on our pre-made components. Our mission is to deliver a user-friendly, clear and easy administration panel that can be used by both simple websites and sophisticated systems. The only requirement is basic HTML and CSS (and some [Liquid](https://github.com/Shopify/liquid/wiki)) knowledge — as a reward, you'll be able to manage and visualise different types of data in the easiest possible way!
@@ -29,13 +26,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 +65,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 +76,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 +95,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-demo.yml
+++ b/_config-demo.yml
@@ -0,0 +1 @@
+preview: true
--- a/_config.yml
+++ b/_config.yml
@@ -1,14 +1,17 @@
 source: pages
 destination: tmp

-version: 1.0.0-alpha.3
+version: 1.0.0-alpha.6
 title: Tabler
 description: Premium and Open Source dashboard template with responsive and high quality UI.
 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
@@ -41,16 +44,16 @@ 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
+#  changelog:
+#    output: false
+#  components:
+#    output: true

 defaults:
  - scope:
@@ -67,10 +70,11 @@ defaults:
      type: "docs"
    values:
      layout: docs
-  - scope:
-      type: "components"
-    values:
-      layout: component
+      toc: true
+#  - scope:
+#      type: "components"
+#    values:
+#      layout: component


 colors:
@@ -126,11 +130,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:
--- a/build/browsersync.js
+++ b/build/browsersync.js
@@ -1,10 +1,3 @@
-/*
- * 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({
--- a/build/change-version.js
+++ b/build/change-version.js
@@ -0,0 +1,110 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const sh = require('shelljs');
+
+sh.config.fatal = true;
+
+// Blame TC39... https://github.com/benjamingr/RegExp.escape/issues/37
+function regExpQuote(string) {
+	return string.replace(/[$()*+-.?[\\\]^{|}]/g, '\\$&')
+}
+
+function regExpQuoteReplacement(string) {
+	return string.replace(/\$/g, '$$')
+}
+
+const DRY_RUN = false;
+
+function walkAsync(directory, excludedDirectories, fileCallback, errback) {
+	if (excludedDirectories.has(path.parse(directory).base)) {
+		return
+	}
+
+	fs.readdir(directory, (err, names) => {
+		if (err) {
+			errback(err);
+			return
+		}
+
+		names.forEach(name => {
+			const filepath = path.join(directory, name);
+			fs.lstat(filepath, (err, stats) => {
+				if (err) {
+					process.nextTick(errback, err);
+					return
+				}
+
+				if (stats.isDirectory()) {
+					process.nextTick(walkAsync, filepath, excludedDirectories, fileCallback, errback)
+				} else if (stats.isFile()) {
+					process.nextTick(fileCallback, filepath)
+				}
+			})
+		})
+	})
+}
+
+function replaceRecursively(directory, excludedDirectories, allowedExtensions, original, replacement) {
+	original = new RegExp(regExpQuote(original), 'g');
+	replacement = regExpQuoteReplacement(replacement);
+	const updateFile = DRY_RUN ?
+		filepath => {
+			if (allowedExtensions.has(path.parse(filepath).ext)) {
+				console.log(`FILE: ${filepath}`)
+			} else {
+				console.log(`EXCLUDED:${filepath}`)
+			}
+		} :
+		filepath => {
+			if (allowedExtensions.has(path.parse(filepath).ext)) {
+				sh.sed('-i', original, replacement, filepath)
+			}
+		};
+
+	walkAsync(directory, excludedDirectories, updateFile, err => {
+		console.error('ERROR while traversing directory!:');
+		console.error(err);
+		process.exit(1)
+	})
+}
+
+function main(args) {
+	if (args.length !== 2) {
+		console.error('USAGE: change-version old_version new_version');
+		console.error('Got arguments:', args);
+		process.exit(1);
+	}
+
+	const oldVersion = args[0];
+	const newVersion = args[1];
+	const EXCLUDED_DIRS = new Set([
+		'.git',
+		'_gh_pages',
+		'node_modules',
+		'vendor',
+		'demo',
+		'dist',
+		'pages/.jekyll-cache',
+		'.cache',
+		'.idea'
+	]);
+
+	const INCLUDED_EXTENSIONS = new Set([
+		// This extension whitelist is how we avoid modifying binary files
+		'',
+		'.css',
+		'.html',
+		'.js',
+		'.json',
+		'.md',
+		'.scss',
+		'.txt',
+		'.yml'
+	]);
+
+	replaceRecursively('.', EXCLUDED_DIRS, INCLUDED_EXTENSIONS, oldVersion, newVersion)
+}
+
+main(process.argv.slice(2));
--- a/build/copy-libs.js
+++ b/build/copy-libs.js
@@ -26,8 +26,10 @@ Object.keys(all_libs.css).forEach(function (lib) {
 files = files.flat();

 files.forEach(function (file) {
+	if(! file.match(/^https?/)) {
 		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,10 +1,3 @@
-/*
- * 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 => ({
--- a/build/rollup.config.js
+++ b/build/rollup.config.js
@@ -1,10 +1,3 @@
-/*
- * 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';
@@ -40,12 +33,9 @@ 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'
--- a/build/scss-compile.js
+++ b/build/scss-compile.js
@@ -1,10 +1,3 @@
-/*
- * 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'),
--- a/build/unused-files.js
+++ b/build/unused-files.js
@@ -1,3 +1,5 @@
+#!/usr/bin/env node
+
 const glob = require("glob"),
 	fs = require("fs");

@@ -22,6 +24,3 @@ includeFiles.forEach(function (file) {
 		console.log('file', file);
 	}
 });
-
-// console.log('foundFiles', foundFiles);
-// console.log('includeFiles', includeFiles);
--- a/demo/400.html
+++ b/demo/400.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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>Page 400 - 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,24 +24,28 @@
    <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"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css" 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"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
  </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">
@@ -54,7 +60,12 @@
          </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>
+              <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"/>
+                <line x1="5" y1="12" x2="19" y2="12" />
+                <line x1="5" y1="12" x2="11" y2="18" />
+                <line x1="5" y1="12" x2="11" y2="6" />
+              </svg>
              Take me home
            </a>
          </div>
@@ -62,137 +73,12 @@
      </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>
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.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>
-      // @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',
-      			});
-      		});
-      	}
-      })();
+      document.body.style.display = "block"
    </script>
  </body>
 </html>
--- a/demo/401.html
+++ b/demo/401.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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>Page 401 - 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,24 +24,28 @@
    <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"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css" 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"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
  </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">
@@ -54,7 +60,12 @@
          </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>
+              <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"/>
+                <line x1="5" y1="12" x2="19" y2="12" />
+                <line x1="5" y1="12" x2="11" y2="18" />
+                <line x1="5" y1="12" x2="11" y2="6" />
+              </svg>
              Take me home
            </a>
          </div>
@@ -62,9 +73,12 @@
      </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>
+    <script src="./dist/libs/jquery/dist/jquery.slim.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/403.html
+++ b/demo/403.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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>Page 403 - 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,24 +24,28 @@
    <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"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css" 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"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
  </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">
@@ -54,7 +60,12 @@
          </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>
+              <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"/>
+                <line x1="5" y1="12" x2="19" y2="12" />
+                <line x1="5" y1="12" x2="11" y2="18" />
+                <line x1="5" y1="12" x2="11" y2="6" />
+              </svg>
              Take me home
            </a>
          </div>
@@ -62,9 +73,12 @@
      </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>
+    <script src="./dist/libs/jquery/dist/jquery.slim.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/404.html
+++ b/demo/404.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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>Page 404 - 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,24 +24,28 @@
    <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"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css" 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"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
  </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">
@@ -54,7 +60,12 @@
          </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>
+              <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"/>
+                <line x1="5" y1="12" x2="19" y2="12" />
+                <line x1="5" y1="12" x2="11" y2="18" />
+                <line x1="5" y1="12" x2="11" y2="6" />
+              </svg>
              Take me home
            </a>
          </div>
@@ -62,9 +73,12 @@
      </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>
+    <script src="./dist/libs/jquery/dist/jquery.slim.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/500.html
+++ b/demo/500.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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>Page 500 - 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,24 +24,28 @@
    <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"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css" 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"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
  </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">
@@ -54,7 +60,12 @@
          </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>
+              <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"/>
+                <line x1="5" y1="12" x2="19" y2="12" />
+                <line x1="5" y1="12" x2="11" y2="18" />
+                <line x1="5" y1="12" x2="11" y2="6" />
+              </svg>
              Take me home
            </a>
          </div>
@@ -62,9 +73,12 @@
      </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>
+    <script src="./dist/libs/jquery/dist/jquery.slim.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/503.html
+++ b/demo/503.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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>Page 503 - 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,24 +24,28 @@
    <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"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css" 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"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
  </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">
@@ -54,7 +60,12 @@
          </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>
+              <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"/>
+                <line x1="5" y1="12" x2="19" y2="12" />
+                <line x1="5" y1="12" x2="11" y2="18" />
+                <line x1="5" y1="12" x2="11" y2="6" />
+              </svg>
              Take me home
            </a>
          </div>
@@ -62,9 +73,12 @@
      </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>
+    <script src="./dist/libs/jquery/dist/jquery.slim.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/all.html
+++ b/demo/all.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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>Index - 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,142 @@
    <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>Index - 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"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css" 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"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.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">
+      <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 hide-sidebar-visible m-0">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+          <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>
-              <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"/>
+          <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"/>
+                  <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>
-                    Source code
+                <span class="badge bg-red"></span>
              </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>
+              <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 dropdown-menu-arrow">
+              <div class="dropdown-menu dropdown-menu-right">
                <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
+                  <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"/>
+                    <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.37.996.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" 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
+                  <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"/>
+                    <path d="M9 7 h-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" 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>
+                <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"/>
+                    <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 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>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <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"/>
+                      <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"/>
+                      <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 +167,39 @@
                      Cards
                    </a>
                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./dropdowns.html" >
+                      Dropdowns
+                    </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="./tables.html" >
+                      Tables
                    </a>
                  </li>
                  <li >
@@ -171,26 +217,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
@@ -218,40 +244,29 @@
                  </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>
+                <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"/>
+                      <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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                    </svg>
                  </span>
+                  <span class="nav-link-title">
                    Extra
+                  </span>
                </a>
                <ul class="dropdown-menu">
                  <li >
@@ -274,17 +289,116 @@
                      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>
                </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"/>
+                      <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -350,6 +464,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 +500,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 +522,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 +567,15 @@
                </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"/>
+                      <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,11 +583,11 @@
            </div>
          </div>
        </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
+      </div>
+      <div class="content">
+        <div class="container-xl">
          <!-- Page title -->
-            <div class="page-title-box">
+          <div class="page-header">
            <div class="row align-items-center">
              <div class="col-auto">
                <h2 class="page-title">
@@ -485,8 +607,8 @@
                <div class="card-body">
                  <ul>
                    <li>
-                        <a href="/search-results.html">
-                          search-results.html
+                      <a href="/layout-condensed-dark.html">
+                        layout-condensed-dark.html
                      </a>
                    </li>
                    <li>
@@ -504,6 +626,11 @@
                        welcome.html
                      </a>
                    </li>
+                    <li>
+                      <a href="/tmp3.html">
+                        tmp3.html
+                      </a>
+                    </li>
                    <li>
                      <a href="/tmp.html">
                        tmp.html
@@ -515,18 +642,33 @@
                      </a>
                    </li>
                    <li>
-                        <a href="/terms-of-service.html">
-                          terms-of-service.html
+                      <a href="/layout-vertical.html">
+                        layout-vertical.html
                      </a>
                    </li>
                    <li>
-                        <a href="/layout-dark-navigation.html">
-                          layout-dark-navigation.html
+                      <a href="/layout-vertical-right.html">
+                        layout-vertical-right.html
                      </a>
                    </li>
                    <li>
-                        <a href="/layout-dark-topnav.html">
-                          layout-dark-topnav.html
+                      <a href="/layout-navbar-dark.html">
+                        layout-navbar-dark.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-horizontal.html">
+                        layout-horizontal.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-fluid.html">
+                        layout-fluid.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-fluid-vertical.html">
+                        layout-fluid-vertical.html
                      </a>
                    </li>
                    <li>
@@ -535,33 +677,23 @@
                      </a>
                    </li>
                    <li>
-                        <a href="/layout-sidebar-dark.html">
-                          layout-sidebar-dark.html
+                      <a href="/layout-condensed.html">
+                        layout-condensed.html
                      </a>
                    </li>
                    <li>
-                        <a href="/layout-sidebar-narrow.html">
-                          layout-sidebar-narrow.html
+                      <a href="/layout-combo.html">
+                        layout-combo.html
                      </a>
                    </li>
                    <li>
-                        <a href="/layout-sidebar-only.html">
-                          layout-sidebar-only.html
+                      <a href="/terms-of-service.html">
+                        terms-of-service.html
                      </a>
                    </li>
                    <li>
-                        <a href="/layout-sidebar-right.html">
-                          layout-sidebar-right.html
-                        </a>
-                      </li>
-                      <li>
-                        <a href="/layout-sidebar.html">
-                          layout-sidebar.html
-                        </a>
-                      </li>
-                      <li>
-                        <a href="/layouts.html">
-                          layouts.html
+                      <a href="/tables.html">
+                        tables.html
                      </a>
                    </li>
                    <li>
@@ -569,9 +701,22 @@
                        sitemap.xml
                      </a>
                    </li>
+                    <li>
+                      <a href="/search-results.html">
+                        search-results.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/navigation.html">
+                        navigation.html
+                      </a>
+                    </li>
                    <li>
                      <a href="/blank.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Blank page
                      </a>
                    </li>
@@ -582,7 +727,10 @@
                    </li>
                    <li>
                      <a href="/buttons.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Buttons
                      </a>
                    </li>
@@ -598,13 +746,19 @@
                    </li>
                    <li>
                      <a href="/carousel.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Carousel
                      </a>
                    </li>
                    <li>
                      <a href="/changelog.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Changelog
                      </a>
                    </li>
@@ -615,18 +769,19 @@
                    </li>
                    <li>
                      <a href="/crypto-currencies.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Crypto currencies
                      </a>
                    </li>
-                      <li>
-                        <a href="/datatables.html">
-                          Data Tables
-                        </a>
-                      </li>
                    <li>
                      <a href="/docs.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Documentation
                      </a>
                    </li>
@@ -642,13 +797,19 @@
                    </li>
                    <li>
                      <a href="/empty.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Empty page
                      </a>
                    </li>
                    <li>
                      <a href="/flags.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Flags
                      </a>
                    </li>
@@ -664,21 +825,22 @@
                    </li>
                    <li>
                      <a href="/gallery.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Gallery
                      </a>
                    </li>
                    <li>
                      <a href="/charts-heatmap.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Heatmap Charts
                      </a>
                    </li>
-                      <li>
-                        <a href="/homepage.html">
-                          Homepage
-                        </a>
-                      </li>
                    <li>
                      <a href="/icons.html">
                        Icons
@@ -706,7 +868,10 @@
                    </li>
                    <li>
                      <a href="/maintenance.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Maintenance mode
                      </a>
                    </li>
@@ -720,6 +885,11 @@
                        Markdown
                      </a>
                    </li>
+                    <li>
+                      <a href="/modals.html">
+                        Modals
+                      </a>
+                    </li>
                    <li>
                      <a href="/music.html">
                        Music components
@@ -727,37 +897,55 @@
                    </li>
                    <li>
                      <a href="/400.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Page 400
                      </a>
                    </li>
                    <li>
                      <a href="/401.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Page 401
                      </a>
                    </li>
                    <li>
                      <a href="/403.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Page 403
                      </a>
                    </li>
                    <li>
                      <a href="/404.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Page 404
                      </a>
                    </li>
                    <li>
                      <a href="/500.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Page 500
                      </a>
                    </li>
                    <li>
                      <a href="/503.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Page 503
                      </a>
                    </li>
@@ -768,7 +956,10 @@
                    </li>
                    <li>
                      <a href="/pricing.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Pricing cards
                      </a>
                    </li>
@@ -784,7 +975,10 @@
                    </li>
                    <li>
                      <a href="/ribbons.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Ribbons
                      </a>
                    </li>
@@ -805,7 +999,10 @@
                    </li>
                    <li>
                      <a href="/social.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Social elements
                      </a>
                    </li>
@@ -821,35 +1018,69 @@
                    </li>
                    <li>
                      <a href="/tabs.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Tabs
                      </a>
                    </li>
                    <li>
                      <a href="/typography.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Typography
                      </a>
                    </li>
                    <li>
                      <a href="/users.html">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" 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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                        Users list
                      </a>
                    </li>
+                    <li>
+                      <a href="/maps-vector.html">
+                        Vector Maps
+                      </a>
+                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
-          </main>
        </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>
+    <script src="./dist/libs/jquery/dist/jquery.slim.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/blank.html
+++ b/demo/blank.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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,142 @@
    <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"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css" 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"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.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">
+      <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 hide-sidebar-visible m-0">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+          <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>
-              <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"/>
+          <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"/>
+                  <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>
-                    Source code
+                <span class="badge bg-red"></span>
              </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>
+              <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 dropdown-menu-arrow">
+              <div class="dropdown-menu dropdown-menu-right">
                <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
+                  <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"/>
+                    <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.37.996.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" 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
+                  <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"/>
+                    <path d="M9 7 h-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" 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>
+                <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"/>
+                    <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 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>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <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"/>
+                      <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"/>
+                      <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 +167,39 @@
                      Cards
                    </a>
                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./dropdowns.html" >
+                      Dropdowns
+                    </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="./tables.html" >
+                      Tables
                    </a>
                  </li>
                  <li >
@@ -171,26 +217,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
@@ -218,40 +244,29 @@
                  </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>
+                <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"/>
+                      <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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                    </svg>
                  </span>
+                  <span class="nav-link-title">
                    Extra
+                  </span>
                </a>
                <ul class="dropdown-menu">
                  <li >
@@ -274,17 +289,116 @@
                      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>
                </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"/>
+                      <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -350,6 +464,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 +500,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 +522,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 +567,15 @@
                </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"/>
+                      <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,9 +583,9 @@
            </div>
          </div>
        </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
+      </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" class="h-8 mb-4" alt="">
@@ -474,19 +596,43 @@
            </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>
+                <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"/>
+                  <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>
-          </main>
        </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>
+    <script src="./dist/libs/jquery/dist/jquery.slim.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,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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>Blog - 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,142 @@
    <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"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css" 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"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.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">
+      <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 hide-sidebar-visible m-0">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+          <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>
-              <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"/>
+          <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"/>
+                  <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>
-                    Source code
+                <span class="badge bg-red"></span>
              </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>
+              <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 dropdown-menu-arrow">
+              <div class="dropdown-menu dropdown-menu-right">
                <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
+                  <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"/>
+                    <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.37.996.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" 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
+                  <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"/>
+                    <path d="M9 7 h-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" 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>
+                <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"/>
+                    <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 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>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <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"/>
+                      <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"/>
+                      <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 +167,39 @@
                      Cards
                    </a>
                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./dropdowns.html" >
+                      Dropdowns
+                    </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="./tables.html" >
+                      Tables
                    </a>
                  </li>
                  <li >
@@ -171,26 +217,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
@@ -218,40 +244,29 @@
                  </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>
+                <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"/>
+                      <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 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>
+                <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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                    </svg>
                  </span>
+                  <span class="nav-link-title">
                    Extra
+                  </span>
                </a>
                <ul class="dropdown-menu">
                  <li >
@@ -274,17 +289,116 @@
                      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>
                </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"/>
+                      <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -350,6 +464,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 +500,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 +522,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 +567,15 @@
                </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"/>
+                      <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,11 +583,11 @@
            </div>
          </div>
        </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
+      </div>
+      <div class="content">
+        <div class="container-xl">
          <!-- Page title -->
-            <div class="page-title-box">
+          <div class="page-header">
            <div class="row align-items-center">
              <div class="col-auto">
                <h2 class="page-title">
@@ -491,7 +613,10 @@
                    </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>
+                        <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"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                      </a>
                    </div>
                  </div>
@@ -514,7 +639,10 @@
                    </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>
+                        <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"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                      </a>
                    </div>
                  </div>
@@ -537,7 +665,10 @@
                    </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>
+                        <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"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                      </a>
                    </div>
                  </div>
@@ -557,7 +688,10 @@
                    </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>
+                        <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"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                      </a>
                    </div>
                  </div>
@@ -577,7 +711,10 @@
                    </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>
+                        <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"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                      </a>
                    </div>
                  </div>
@@ -597,7 +734,10 @@
                    </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>
+                        <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"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                      </a>
                    </div>
                  </div>
@@ -624,7 +764,10 @@
                        </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>
+                            <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"/>
+                              <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                            </svg>
                          </a>
                        </div>
                      </div>
@@ -653,7 +796,10 @@
                        </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>
+                            <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"/>
+                              <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                            </svg>
                          </a>
                        </div>
                      </div>
@@ -682,7 +828,10 @@
                        </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>
+                            <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"/>
+                              <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                            </svg>
                          </a>
                        </div>
                      </div>
@@ -711,7 +860,10 @@
                        </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>
+                            <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"/>
+                              <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                            </svg>
                          </a>
                        </div>
                      </div>
@@ -721,14 +873,34 @@
              </div>
            </div>
          </div>
-          </main>
        </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>
+    <script src="./dist/libs/jquery/dist/jquery.slim.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/buttons.html
+++ b/demo/buttons.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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>Buttons - 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,142 @@
    <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>Buttons - 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"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css" 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"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.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">
+      <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 hide-sidebar-visible m-0">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+          <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>
-              <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"/>
+          <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"/>
+                  <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>
-                    Source code
+                <span class="badge bg-red"></span>
              </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>
+              <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 dropdown-menu-arrow">
+              <div class="dropdown-menu dropdown-menu-right">
                <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
+                  <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"/>
+                    <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.37.996.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" 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
+                  <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"/>
+                    <path d="M9 7 h-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" 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>
+                <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"/>
+                    <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 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>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <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"/>
+                      <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"/>
+                      <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 active" href="./buttons.html" >
                      Buttons
-                        <span class="badge bg-green ml-auto">New</span>
                    </a>
                  </li>
                  <li >
@@ -146,14 +167,39 @@
                      Cards
                    </a>
                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./dropdowns.html" >
+                      Dropdowns
+                    </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="./tables.html" >
+                      Tables
                    </a>
                  </li>
                  <li >
@@ -171,26 +217,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
@@ -218,40 +244,29 @@
                  </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>
+                <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"/>
+                      <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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                    </svg>
                  </span>
+                  <span class="nav-link-title">
                    Extra
+                  </span>
                </a>
                <ul class="dropdown-menu">
                  <li >
@@ -274,17 +289,116 @@
                      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>
                </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"/>
+                      <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -350,6 +464,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 +500,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 +522,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 +567,15 @@
                </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"/>
+                      <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,11 +583,11 @@
            </div>
          </div>
        </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
+      </div>
+      <div class="content">
+        <div class="container-xl">
          <!-- Page title -->
-            <div class="page-title-box">
+          <div class="page-header">
            <div class="row align-items-center">
              <div class="col-auto">
                <h2 class="page-title">
@@ -1311,14 +1433,34 @@
              </div>
            </div>
          </div>
-          </main>
        </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>
+    <script src="./dist/libs/jquery/dist/jquery.slim.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/calendar.html
+++ b/demo/calendar.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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,142 @@
    <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"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css" 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"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.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">
+      <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 hide-sidebar-visible m-0">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+          <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>
-              <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"/>
+          <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"/>
+                  <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>
-                    Source code
+                <span class="badge bg-red"></span>
              </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>
+              <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 dropdown-menu-arrow">
+              <div class="dropdown-menu dropdown-menu-right">
                <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
+                  <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"/>
+                    <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.37.996.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" 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
+                  <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"/>
+                    <path d="M9 7 h-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" 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>
+                <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"/>
+                    <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 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>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <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"/>
+                      <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"/>
+                      <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 +167,39 @@
                      Cards
                    </a>
                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./dropdowns.html" >
+                      Dropdowns
+                    </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="./tables.html" >
+                      Tables
                    </a>
                  </li>
                  <li >
@@ -171,26 +217,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
@@ -218,40 +244,29 @@
                  </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>
+                <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"/>
+                      <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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                    </svg>
                  </span>
+                  <span class="nav-link-title">
                    Extra
+                  </span>
                </a>
                <ul class="dropdown-menu">
                  <li >
@@ -274,17 +289,116 @@
                      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>
                </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"/>
+                      <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -350,6 +464,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 +500,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 +522,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 +567,15 @@
                </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"/>
+                      <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,11 +583,11 @@
            </div>
          </div>
        </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
+      </div>
+      <div class="content">
+        <div class="container-xl">
          <!-- Page title -->
-            <div class="page-title-box">
+          <div class="page-header">
            <div class="row align-items-center">
              <div class="col-auto">
                <h2 class="page-title">
@@ -476,7 +598,11 @@
              <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>
+                    <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"/>
+                      <line x1="12" y1="5" x2="12" y2="19" />
+                      <line x1="5" y1="12" x2="19" y2="12" />
+                    </svg>
                    Add event
                  </a>
                </div>
@@ -488,20 +614,148 @@
              <div id="calendar-main" class="card-calendar"></div>
            </div>
          </div>
-          </main>
+        </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="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"/>
+                <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>
+                  <div class="form-selectgroup-label d-flex align-items-center p-3">
+                    <div class="mr-3">
+                      <span class="form-selectgroup-check"></span>
+                    </div>
+                    <div class="form-selectgroup-label-content">
+                      <div class="form-selectgroup-title strong mb-1">Simple</div>
+                      <div class="text-muted">Provide only basic data needed for the report</div>
+                    </div>
+                  </div>
+                </label>
+              </div>
+              <div class="col-lg-6">
+                <label class="form-selectgroup-item">
+                  <input type="radio" name="report-type" value="1" class="form-selectgroup-input">
+                  <div class="form-selectgroup-label d-flex align-items-center p-3">
+                    <div class="mr-3">
+                      <span class="form-selectgroup-check"></span>
+                    </div>
+                    <div class="form-selectgroup-label-content">
+                      <div class="form-selectgroup-title strong mb-1">Advanced</div>
+                      <div class="text-muted">Insert charts and additional advanced analyses to be inserted in the report</div>
+                    </div>
+                  </div>
+                </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 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>
+          </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"/>
+                <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/jquery/dist/jquery.slim.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 +831,8 @@
         })).render();
      });
    </script>
+    <script>
+      document.body.style.display = "block"
+    </script>
  </body>
 </html>
--- a/demo/cards.html
+++ b/demo/cards.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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 - 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,142 @@
    <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>Cards - 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"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css" 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"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.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">
+      <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 hide-sidebar-visible m-0">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+          <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>
-              <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"/>
+          <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"/>
+                  <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>
-                    Source code
+                <span class="badge bg-red"></span>
              </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>
+              <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 dropdown-menu-arrow">
+              <div class="dropdown-menu dropdown-menu-right">
                <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
+                  <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"/>
+                    <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.37.996.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" 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
+                  <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"/>
+                    <path d="M9 7 h-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" 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>
+                <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"/>
+                    <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 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>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <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"/>
+                      <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"/>
+                      <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 +167,39 @@
                      Cards
                    </a>
                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./dropdowns.html" >
+                      Dropdowns
+                    </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="./tables.html" >
+                      Tables
                    </a>
                  </li>
                  <li >
@@ -171,26 +217,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
@@ -218,40 +244,29 @@
                  </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>
+                <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"/>
+                      <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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                    </svg>
                  </span>
+                  <span class="nav-link-title">
                    Extra
+                  </span>
                </a>
                <ul class="dropdown-menu">
                  <li >
@@ -274,17 +289,116 @@
                      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>
                </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"/>
+                      <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -350,6 +464,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 +500,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 +522,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 +567,15 @@
                </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"/>
+                      <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,11 +583,11 @@
            </div>
          </div>
        </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
+      </div>
+      <div class="content">
+        <div class="container-xl">
          <!-- Page title -->
-            <div class="page-title-box">
+          <div class="page-header">
            <div class="row align-items-center">
              <div class="col-auto">
                <h2 class="page-title">
@@ -529,12 +651,12 @@
                  <div class="row align-items-center">
                    <div class="col-auto ml-auto">
                      <div class="avatar-list avatar-list-stacked">
-                          <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                          <span class="avatar avatar-sm">JL</span>
-                          <span class="avatar avatar-sm" style="background-image: url(./static/avatars/002m.jpg)"></span>
-                          <span class="avatar avatar-sm" style="background-image: url(./static/avatars/003m.jpg)"></span>
-                          <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000f.jpg)"></span>
-                          <span class="avatar avatar-sm">+3</span>
+                        <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>
@@ -550,7 +672,10 @@
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" 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 mr-1"><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>
+                        <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"/>
+                          <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                        </svg>
                        Link
                      </a>
                    </li>
@@ -561,7 +686,11 @@
                    </li>
                    <li class="nav-item ml-auto">
                      <a class="nav-link" 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"><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>
+                        <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"/>
+                          <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.37.996.608 2.296.07 2.572-1.065z" />
+                          <circle cx="12" cy="12" r="3" />
+                        </svg>
                      </a>
                    </li>
                  </ul>
@@ -581,7 +710,10 @@
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" 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 mr-1"><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>
+                        <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"/>
+                          <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                        </svg>
                        Link
                      </a>
                    </li>
@@ -592,7 +724,11 @@
                    </li>
                    <li class="nav-item ml-auto">
                      <a class="nav-link" 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"><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>
+                        <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"/>
+                          <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.37.996.608 2.296.07 2.572-1.065z" />
+                          <circle cx="12" cy="12" r="3" />
+                        </svg>
                      </a>
                    </li>
                  </ul>
@@ -625,7 +761,11 @@
                  </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>
+                      <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"/>
+                        <circle cx="10" cy="10" r="7" />
+                        <line x1="21" y1="21" x2="15" y2="15" />
+                      </svg>
                      Search again
                    </a>
                  </div>
@@ -731,7 +871,7 @@
            <div class="col-md-6 col-xl-8">
              <div class="card">
                <div class="row row-0">
-                    <div class="col-md-3">
+                  <div class="col-3">
                    <img src="./static/photos/2854fd67ddbd6217.jpg" class="w-100 h-100 object-cover" alt="Card side image">
                  </div>
                  <div class="col">
@@ -745,7 +885,7 @@
              </div>
              <div class="card">
                <div class="row row-0">
-                    <div class="col-md-3 order-md-last">
+                  <div class="col-3 order-md-last">
                    <img src="./static/photos/de6d0fd1feebb6a2.jpg" class="w-100 h-100 object-cover" alt="Card side image">
                  </div>
                  <div class="col">
@@ -825,6 +965,69 @@
                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
                    </div>
                  </div>
+                  <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 class="col-xl-6">
                  <div class="card">
@@ -884,14 +1087,50 @@
              </div>
            </div>
          </div>
-          </main>
        </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>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
+    <script src="./dist/libs/imask/dist/imask.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>
+      (function () {
+      	/**
+      	 * Input mask
+      	 */
+      	var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
+      	maskElementList.map(function (maskEl) {
+      		console.log('maskEl', 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/carousel.html
+++ b/demo/carousel.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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,142 @@
    <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"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css" 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"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.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">
+      <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 hide-sidebar-visible m-0">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+          <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>
-              <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"/>
+          <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"/>
+                  <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>
-                    Source code
+                <span class="badge bg-red"></span>
              </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>
+              <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 dropdown-menu-arrow">
+              <div class="dropdown-menu dropdown-menu-right">
                <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
+                  <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"/>
+                    <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.37.996.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" 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
+                  <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"/>
+                    <path d="M9 7 h-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" 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>
+                <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"/>
+                    <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 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>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <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"/>
+                      <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"/>
+                      <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 +167,39 @@
                      Cards
                    </a>
                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./dropdowns.html" >
+                      Dropdowns
+                    </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="./tables.html" >
+                      Tables
                    </a>
                  </li>
                  <li >
@@ -171,26 +217,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
@@ -218,40 +244,29 @@
                  </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>
+                <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"/>
+                      <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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                    </svg>
                  </span>
+                  <span class="nav-link-title">
                    Extra
+                  </span>
                </a>
                <ul class="dropdown-menu">
                  <li >
@@ -274,17 +289,116 @@
                      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>
                </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"/>
+                      <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -350,6 +464,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 +500,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 +522,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 +567,15 @@
                </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"/>
+                      <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,11 +583,11 @@
            </div>
          </div>
        </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
+      </div>
+      <div class="content">
+        <div class="container-xl">
          <!-- Page title -->
-            <div class="page-title-box">
+          <div class="page-header">
            <div class="row align-items-center">
              <div class="col-auto">
                <h2 class="page-title">
@@ -636,14 +758,34 @@
              </div>
            </div>
          </div>
-          </main>
        </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>
+    <script src="./dist/libs/jquery/dist/jquery.slim.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,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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,142 @@
    <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"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css" 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"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.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">
+      <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 hide-sidebar-visible m-0">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+          <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>
-              <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"/>
+          <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"/>
+                  <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>
-                    Source code
+                <span class="badge bg-red"></span>
              </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>
+              <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 dropdown-menu-arrow">
+              <div class="dropdown-menu dropdown-menu-right">
                <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
+                  <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"/>
+                    <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.37.996.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" 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
+                  <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"/>
+                    <path d="M9 7 h-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" 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>
+                <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"/>
+                    <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 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>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <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"/>
+                      <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"/>
+                      <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 +167,39 @@
                      Cards
                    </a>
                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./dropdowns.html" >
+                      Dropdowns
+                    </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="./tables.html" >
+                      Tables
                    </a>
                  </li>
                  <li >
@@ -171,26 +217,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
@@ -218,40 +244,29 @@
                  </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>
+                <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"/>
+                      <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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                    </svg>
                  </span>
+                  <span class="nav-link-title">
                    Extra
+                  </span>
                </a>
                <ul class="dropdown-menu">
                  <li >
@@ -274,17 +289,116 @@
                      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>
                </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"/>
+                      <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -350,6 +464,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 +500,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 +522,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 +567,15 @@
                </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"/>
+                      <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,11 +583,11 @@
            </div>
          </div>
        </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
+      </div>
+      <div class="content">
+        <div class="container-xl">
          <!-- Page title -->
-            <div class="page-title-box">
+          <div class="page-header">
            <div class="row align-items-center">
              <div class="col-auto">
                <h2 class="page-title">
@@ -474,27 +596,38 @@
              </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 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>
-          </main>
+              <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>
+    <script src="./dist/libs/jquery/dist/jquery.slim.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
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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>Heatmap Charts - 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,142 @@
    <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>Heatmap Charts - 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"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css" 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"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.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">
+      <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 hide-sidebar-visible m-0">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+          <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>
-              <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"/>
+          <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"/>
+                  <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>
-                    Source code
+                <span class="badge bg-red"></span>
              </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>
+              <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 dropdown-menu-arrow">
+              <div class="dropdown-menu dropdown-menu-right">
                <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
+                  <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"/>
+                    <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.37.996.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" 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
+                  <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"/>
+                    <path d="M9 7 h-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" 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>
+                <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"/>
+                    <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 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>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <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"/>
+                      <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"/>
+                      <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 +167,39 @@
                      Cards
                    </a>
                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./dropdowns.html" >
+                      Dropdowns
+                    </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="./tables.html" >
+                      Tables
                    </a>
                  </li>
                  <li >
@@ -171,26 +217,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
@@ -218,40 +244,29 @@
                  </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>
+                <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"/>
+                      <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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                    </svg>
                  </span>
+                  <span class="nav-link-title">
                    Extra
+                  </span>
                </a>
                <ul class="dropdown-menu">
                  <li >
@@ -274,17 +289,116 @@
                      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>
                </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"/>
+                      <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -350,6 +464,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 +500,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 +522,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 +567,15 @@
                </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"/>
+                      <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,11 +583,11 @@
            </div>
          </div>
        </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
+      </div>
+      <div class="content">
+        <div class="container-xl">
          <!-- Page title -->
-            <div class="page-title-box">
+          <div class="page-header">
            <div class="row align-items-center">
              <div class="col-auto">
                <h2 class="page-title">
@@ -707,14 +829,34 @@
              </script>
            </div>
          </div>
-          </main>
        </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>
+    <script src="./dist/libs/jquery/dist/jquery.slim.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.html
+++ b/demo/charts.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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>Charts - 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,142 @@
    <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>Charts - 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"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css" 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"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.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">
+      <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 hide-sidebar-visible m-0">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+          <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>
-              <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"/>
+          <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"/>
+                  <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>
-                    Source code
+                <span class="badge bg-red"></span>
              </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>
+              <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 dropdown-menu-arrow">
+              <div class="dropdown-menu dropdown-menu-right">
                <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
+                  <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"/>
+                    <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.37.996.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" 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
+                  <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"/>
+                    <path d="M9 7 h-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" 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>
+                <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"/>
+                    <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 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>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <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"/>
+                      <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>
-                    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>
+              <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"/>
+                      <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>
-                    Form elements
+                  <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 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
+                      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 >
@@ -147,13 +168,38 @@
                    </a>
                  </li>
                  <li >
-                      <a class="dropdown-item" href="./charts.html" >
+                    <a class="dropdown-item" href="./dropdowns.html" >
+                      Dropdowns
+                    </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 active" href="./charts.html" >
                      Charts
                    </a>
                  </li>
                  <li >
-                      <a class="dropdown-item" href="./datatables.html" >
-                        Data Tables
+                    <a class="dropdown-item" href="./tables.html" >
+                      Tables
                    </a>
                  </li>
                  <li >
@@ -171,26 +217,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
@@ -218,40 +244,29 @@
                  </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>
+                <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"/>
+                      <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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                    </svg>
                  </span>
+                  <span class="nav-link-title">
                    Extra
+                  </span>
                </a>
                <ul class="dropdown-menu">
                  <li >
@@ -274,17 +289,116 @@
                      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>
                </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"/>
+                      <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -350,6 +464,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 +500,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 +522,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 +567,15 @@
                </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"/>
+                      <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,11 +583,11 @@
            </div>
          </div>
        </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
+      </div>
+      <div class="content">
+        <div class="container-xl">
          <!-- Page title -->
-            <div class="page-title-box">
+          <div class="page-header">
            <div class="row align-items-center">
              <div class="col-auto">
                <h2 class="page-title">
@@ -482,13 +604,6 @@
                </div>
              </div>
            </div>
-              <div class="col-lg-6 col-xl-4">
-                <div class="card">
-                  <div class="card-body">
-                    <div id="chart-mentions" ></div>
-                  </div>
-                </div>
-              </div>
            <div class="col-lg-6 col-xl-4">
              <div class="card">
                <div class="card-body">
@@ -644,16 +759,33 @@
              </div>
            </div>
          </div>
-          </main>
        </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/apexcharts/dist/apexcharts.min.js?1580339009"></script>
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
+    <script src="./dist/libs/apexcharts/dist/apexcharts.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>
      // @formatter:off
      document.addEventListener("DOMContentLoaded", function () {
@@ -719,86 +851,6 @@
      });
      // @formatter:on
    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-mentions'), {
-      		chart: {
-      			type: "bar",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      			stacked: true,
-      		},
-      		plotOptions: {
-      			bar: {
-      				columnWidth: '50%',
-      			}
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		series: [{
-      			name: "Web",
-      			data: [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 2, 12, 5, 8, 22, 6, 8, 6, 4, 1, 8, 24, 29, 51, 40, 47, 23, 26, 50, 26, 41, 22, 46, 47, 81, 46, 6]
-      		},{
-      			name: "Social",
-      			data: [2, 5, 4, 3, 3, 1, 4, 7, 5, 1, 2, 5, 3, 2, 6, 7, 7, 1, 5, 5, 2, 12, 4, 6, 18, 3, 5, 2, 13, 15, 20, 47, 18, 15, 11, 10, 0]
-      		},{
-      			name: "Other",
-      			data: [2, 9, 1, 7, 8, 3, 6, 5, 5, 4, 6, 4, 1, 9, 3, 6, 7, 5, 2, 8, 4, 9, 1, 2, 6, 7, 5, 1, 8, 3, 2, 3, 4, 9, 7, 1, 6]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -8
-      			},
-      			strokeDashArray: 4,
-      			xaxis: {
-      				lines: {
-      					show: true
-      				}
-      			},
-      		},
-      		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', '2020-07-20', '2020-07-21', '2020-07-22', '2020-07-23', '2020-07-24', '2020-07-25', '2020-07-26'
-      		],
-      		colors: ["#206bc4", "#79a6dc", "#bfe399"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
    <script>
      // @formatter:off
      document.addEventListener("DOMContentLoaded", function () {
@@ -1632,7 +1684,7 @@
      				padding: 4
      			},
      		},
-      		colors: ["#206bc4", "#7bd235", "#ff922b"],
+      		colors: ["#206bc4", "#94d82d", "#ff922b"],
      		legend: {
      			show: false,
      		},
@@ -2230,5 +2282,8 @@
      });
      // @formatter:on
    </script>
+    <script>
+      document.body.style.display = "block"
+    </script>
  </body>
 </html>
--- a/demo/components.html
+++ b/demo/components.html
@@ -2,11 +2,11 @@
 <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">
+  <link rel="canonical" href="..">
+  <meta http-equiv="refresh" content="0; url=..">
  <meta name="robots" content="noindex">
-  <noscript><a href="./components/card-buttons.html">Click here if you are not redirected.</a></noscript>
+  <noscript><a href="..">Click here if you are not redirected.</a></noscript>
  <script>
-    location="./components/card-buttons.html";
+    location="..";
  </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/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
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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>Crypto currencies - 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,142 @@
    <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>Crypto currencies - 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"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css" 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"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.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">
+      <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 hide-sidebar-visible m-0">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+          <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>
-              <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"/>
+          <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"/>
+                  <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>
-                    Source code
+                <span class="badge bg-red"></span>
              </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>
+              <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 dropdown-menu-arrow">
+              <div class="dropdown-menu dropdown-menu-right">
                <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
+                  <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"/>
+                    <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.37.996.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" 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
+                  <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"/>
+                    <path d="M9 7 h-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" 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>
+                <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"/>
+                    <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 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>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <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"/>
+                      <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"/>
+                      <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 +167,39 @@
                      Cards
                    </a>
                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./dropdowns.html" >
+                      Dropdowns
+                    </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="./tables.html" >
+                      Tables
                    </a>
                  </li>
                  <li >
@@ -171,26 +217,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
@@ -218,40 +244,29 @@
                  </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>
+                <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"/>
+                      <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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                    </svg>
                  </span>
+                  <span class="nav-link-title">
                    Extra
+                  </span>
                </a>
                <ul class="dropdown-menu">
                  <li >
@@ -274,17 +289,116 @@
                      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>
                </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"/>
+                      <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -350,6 +464,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 +500,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 +522,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 +567,15 @@
                </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"/>
+                      <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,11 +583,11 @@
            </div>
          </div>
        </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
+      </div>
+      <div class="content">
+        <div class="container-xl">
          <!-- Page title -->
-            <div class="page-title-box">
+          <div class="page-header">
            <div class="row align-items-center">
              <div class="col-auto">
                <h2 class="page-title">
@@ -1690,14 +1812,34 @@
              </tr>
            </table>
          </div>
-          </main>
        </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>
+    <script src="./dist/libs/jquery/dist/jquery.slim.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/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,143 @@
+/*!
+ * Tabler (v1.0.0-alpha.5)
+ * Copyright 2018-2020 The Tabler Authors
+ * Copyright 2018-2020 codecalm
+ * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+ */
+/**
+Dark mode
+ */
+pre.highlight,
+.highlight pre {
+  max-height: 30rem;
+  margin: 1.5rem 0;
+  overflow: auto;
+  font-size: 0.625rem;
+  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(110, 117, 130, 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(110, 117, 130, 0.2);
+    border-top: none; } }
+
+@media not print and (prefers-color-scheme: dark) {
+  .theme-dark-auto .example-code {
+    border: 1px solid rgba(110, 117, 130, 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: #6e7582; }
+
+.dropdown-menu-demo {
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  top: 0;
+  margin-bottom: 1rem; }
+/*# sourceMappingURL=demo.css.map */
--- a/demo/dist/css/demo.css.map
+++ b/demo/dist/css/demo.css.map
--- a/demo/dist/css/demo.min.css
+++ b/demo/dist/css/demo.min.css
@@ -0,0 +1,7 @@
+/*!
+ * Tabler (v1.0.0-alpha.5)
+ * Copyright 2018-2020 The Tabler Authors
+ * Copyright 2018-2020 codecalm
+ * 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:.625rem;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(110,117,130,.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(110,117,130,.2);border-top:none}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto .example-code{border:1px solid rgba(110,117,130,.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:#6e7582}.dropdown-menu-demo{display:inline-block;width:100%;position:relative;top:0;margin-bottom:1rem}
+/*# sourceMappingURL=demo.min.css.map */
--- a/demo/dist/css/demo.min.css.map
+++ b/demo/dist/css/demo.min.css.map
--- 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,12 @@
 /*!
- * Tabler Flags (v0.9.0)
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
+ * Tabler (v1.0.0-alpha.5)
+ * Copyright 2018-2020 The Tabler Authors
+ * Copyright 2018-2020 codecalm
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
+/**
+Dark mode
+ */
 .flag {
  position: relative;
  display: inline-block;
@@ -13,7 +16,7 @@
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
-  border: 1px solid rgba(123, 126, 136, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
  border-radius: 3px; }

 .flag-country-ad {
--- 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,12 @@
 /*!
- * Tabler Payments (v0.1.0)
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
+ * Tabler (v1.0.0-alpha.5)
+ * Copyright 2018-2020 The Tabler Authors
+ * Copyright 2018-2020 codecalm
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
+/**
+Dark mode
+ */
 .payment {
  width: 3.33332rem;
  height: 2rem;
@@ -14,360 +17,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; }
--- 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.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/fullcalendar/core/main.min.js
+++ b/demo/dist/libs/fullcalendar/core/main.min.js
--- 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.js
+++ b/demo/dist/libs/fullcalendar/list/main.min.js
--- a/demo/dist/libs/fullcalendar/timegrid/main.min.js
+++ b/demo/dist/libs/fullcalendar/timegrid/main.min.js
--- a/demo/dist/libs/imask/dist/imask.min.js
+++ b/demo/dist/libs/imask/dist/imask.min.js
--- a/demo/dist/libs/jquery/dist/jquery.slim.min.js
+++ b/demo/dist/libs/jquery/dist/jquery.slim.min.js
--- a/demo/dist/libs/nouislider/distribute/nouislider.min.css
+++ b/demo/dist/libs/nouislider/distribute/nouislider.min.css
@@ -1,2 +1,2 @@
-/*! nouislider - 14.1.1 - 12/15/2019 */
+/*! nouislider - 14.2.0 - 3/27/2020 */
 .noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;right:0;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-origin:0 0;transform-style:flat}.noUi-connect{height:100%;width:100%}.noUi-origin{height:10%;width:10%}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:transform .3s;transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;right:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;right:-6px;top:-17px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#FAFAFA;border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-connects{border-radius:3px}.noUi-connect{background:#3FB8AF}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#B8B8B8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-sub{background:#AAA}.noUi-marker-large{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{-webkit-transform:translate(50%,50%);transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);padding-left:25px}.noUi-rtl .noUi-value-vertical{-webkit-transform:translate(0,50%);transform:translate(0,50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #D9D9D9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%,0);transform:translate(-50%,0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);top:50%;right:120%}
--- a/demo/dist/libs/nouislider/distribute/nouislider.min.js
+++ b/demo/dist/libs/nouislider/distribute/nouislider.min.js
--- a/demo/docs/alerts.html
+++ b/demo/docs/alerts.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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>Alerts - Documentation - 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,124 +24,143 @@
    <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>Alerts - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="description" content="Bootstrap provides an easy way to create predefined alert messages."/>
+    <meta name="description" content="Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app."/>
    <!-- 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"/>
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/css/tabler.min.css" 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"/>
+    <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-buttons.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">
+      <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 hide-sidebar-visible m-0">
-                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+          <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>
-              <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"/>
+          <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"/>
+                  <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>
-                    Source code
+                <span class="badge bg-red"></span>
              </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>
+              <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 dropdown-menu-arrow">
+              <div class="dropdown-menu dropdown-menu-right">
                <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
+                  <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"/>
+                    <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.37.996.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" 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
+                  <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"/>
+                    <path d="M9 7 h-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" 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>
+                <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"/>
+                    <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 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>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <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"/>
+                      <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"/>
+                      <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 >
@@ -147,14 +168,39 @@
                      Cards
                    </a>
                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../dropdowns.html" >
+                      Dropdowns
+                    </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="../tables.html" >
+                      Tables
                    </a>
                  </li>
                  <li >
@@ -172,26 +218,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
@@ -219,40 +245,29 @@
                  </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>
+                <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"/>
+                      <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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                    </svg>
                  </span>
+                  <span class="nav-link-title">
                    Extra
+                  </span>
                </a>
                <ul class="dropdown-menu">
                  <li >
@@ -275,17 +290,116 @@
                      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>
+                </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"/>
+                      <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-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 active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" 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"><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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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>
-                    Documentation
                </a>
-                  <ul class="dropdown-menu">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
                  <li >
                    <a class="dropdown-item" href="../docs/index.html" >
                      Introduction
@@ -351,6 +465,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
@@ -382,8 +501,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 >
@@ -404,7 +523,6 @@
                  <li >
                    <a class="dropdown-item" href="../docs/ribbons.html" >
                      Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
                    </a>
                  </li>
                  <li >
@@ -450,11 +568,15 @@
                </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"/>
+                      <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>
@@ -462,11 +584,11 @@
            </div>
          </div>
        </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
+      </div>
+      <div class="content">
+        <div class="container-xl">
          <!-- Page title -->
-            <div class="page-title-box">
+          <div class="page-header">
            <div class="row align-items-center">
              <div class="col-auto">
                <h2 class="page-title">
@@ -476,129 +598,48 @@
            </div>
          </div>
          <div class="row justify-content-center">
-              <div class="col-lg-3 order-lg-1 mb-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-secondary mb-4 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+            <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
+              <div class="sticky-top">
+                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" 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>
                  Browse source code
                </a>
-                <div class="list-group list-group-transparent mb-0">
-                  <a href="../docs/index.html" class="list-group-item list-group-item-action">
-                    Introduction
-                  </a>
-                  <a href="../docs/alerts.html" class="list-group-item list-group-item-action active">
-                    Alerts
-                  </a>
-                  <a href="../docs/autosize.html" class="list-group-item list-group-item-action">
-                    Autosize
-                  </a>
-                  <a href="../docs/avatars.html" class="list-group-item list-group-item-action">
-                    Avatars
-                  </a>
-                  <a href="../docs/badges.html" class="list-group-item list-group-item-action">
-                    Badges
-                  </a>
-                  <a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action">
-                    Breadcrumb
-                  </a>
-                  <a href="../docs/buttons.html" class="list-group-item list-group-item-action">
-                    Buttons
-                  </a>
-                  <a href="../docs/cards.html" class="list-group-item list-group-item-action">
-                    Cards
-                  </a>
-                  <a href="../docs/carousel.html" class="list-group-item list-group-item-action">
-                    Carousel
-                  </a>
-                  <a href="../docs/colors.html" class="list-group-item list-group-item-action">
-                    Colors
-                  </a>
-                  <a href="../docs/countup.html" class="list-group-item list-group-item-action">
-                    Countup
-                  </a>
-                  <a href="../docs/cursors.html" class="list-group-item list-group-item-action">
-                    Cursors
-                  </a>
-                  <a href="../docs/charts.html" class="list-group-item list-group-item-action">
-                    Charts
-                  </a>
-                  <a href="../docs/divider.html" class="list-group-item list-group-item-action">
-                    Divider
-                  </a>
-                  <a href="../docs/empty.html" class="list-group-item list-group-item-action">
-                    Empty states
-                  </a>
-                  <a href="../docs/flags.html" class="list-group-item list-group-item-action">
-                    Flags
-                  </a>
-                  <a href="../docs/form-elements.html" class="list-group-item list-group-item-action">
-                    Form elements
-                  </a>
-                  <a href="../docs/form-helpers.html" class="list-group-item list-group-item-action">
-                    Form helpers
-                  </a>
-                  <a href="../docs/input-mask.html" class="list-group-item list-group-item-action">
-                    Form input mask
-                  </a>
-                  <a href="../docs/layout.html" class="list-group-item list-group-item-action">
-                    Layout
-                  </a>
-                  <a href="../docs/progress.html" class="list-group-item list-group-item-action">
-                    Progress
-                  </a>
-                  <a href="../docs/payments.html" class="list-group-item list-group-item-action">
-                    Payments
-                  </a>
-                  <a href="../docs/range-slider.html" class="list-group-item list-group-item-action">
-                    Range slider
-                  </a>
-                  <a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
-                    Ribbons
-                    <span class="badge bg-green ml-auto">New</span>
-                  </a>
-                  <a href="../docs/spinners.html" class="list-group-item list-group-item-action">
-                    Spinners
-                  </a>
-                  <a href="../docs/steps.html" class="list-group-item list-group-item-action">
-                    Steps
-                  </a>
-                  <a href="../docs/tables.html" class="list-group-item list-group-item-action">
-                    Tables
-                  </a>
-                  <a href="../docs/tabs.html" class="list-group-item list-group-item-action">
-                    Tabs
-                  </a>
-                  <a href="../docs/timelines.html" class="list-group-item list-group-item-action">
-                    Timelines
-                  </a>
-                  <a href="../docs/toasts.html" class="list-group-item list-group-item-action">
-                    Toasts
-                  </a>
-                  <a href="../docs/tooltips.html" class="list-group-item list-group-item-action">
-                    Tooltips
-                  </a>
-                  <a href="../docs/typography.html" class="list-group-item list-group-item-action">
-                    Typography
-                  </a>
+                <h5 class="subheader">On this page</h5>
+                <ul class="list-unstyled">
+                  <li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
+                  <li class="toc-entry toc-h2"><a href="#alert-links">Alert links</a></li>
+                  <li class="toc-entry toc-h2"><a href="#dismissible-alerts">Dismissible alerts</a></li>
+                  <li class="toc-entry toc-h2"><a href="#alerts-with-icons">Alerts with icons</a></li>
+                  <li class="toc-entry toc-h2"><a href="#alert-with-avatar">Alert with avatar</a></li>
+                  <li class="toc-entry toc-h2"><a href="#alert-with-buttons">Alert with buttons</a></li>
+                </ul>
              </div>
            </div>
            <div class="col-lg-9">
-                <div class="card">
-                  <div class="card-body p-md-6 p-xl-7">
+              <div class="card card-lg">
+                <div class="card-body">
                  <div class="markdown">
-                      <p class="mb-4 float-right">
+                    <div class="d-flex">
+                      <h2 class="h1 mt-0 mb-3">Alerts</h2>
+                      <p class="ml-auto">
                        <a href="https://getbootstrap.com/docs/4.4/components/alerts/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                          Bootstrap documentation
                        </a>
                      </p>
-                      <h2 class="h1 mt-0 mb-3">Alerts
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                      </h2>
-                      <p>Bootstrap provides an easy way to create predefined alert messages.</p>
-                      <h3 id="default-markup">Default markup</h3>
-                      <div class="example">
+                    </div>
+                    <p>Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.</p>
+                    <h2 id="default-markup">Default markup</h2>
+                    <p>Depending on the information you need to convey, you can use one of the following types of alert messages - <strong>success</strong>, <strong>info</strong>, <strong>warning</strong> or <strong>danger</strong>. Using the right type of alert modal will help draw users’ attention to the message and prompt them to take action.</p>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
                        <div class="alert alert-success" role="alert">
                          This is a success alert — check it out!
                        </div>
@@ -612,7 +653,9 @@
                          This is a danger alert — check it out!
                        </div>
                      </div>
-                      <div class="highlight">
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
  This is a success alert — check it out!
 <span class="nt">&lt;/div&gt;</span>
@@ -625,10 +668,12 @@
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
  This is a danger alert — check it out!
 <span class="nt">&lt;/div&gt;</span></code></pre>
+                      </figure>
                    </div>
-                      <h3 id="alert-links">Alert Links</h3>
-                      <p>Add the <code class="highlighter-rouge">alert-link</code> class to any links inside the alert box to create “matching colored links”:</p>
-                      <div class="example">
+                    <h2 id="alert-links">Alert links</h2>
+                    <p>Add a link to your alert message to redirect users to the details they need to complete or additional information they should read.</p>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
                        <div class="alert alert-success" role="alert">
                          This is a success alert — <a href="#" class="alert-link">check it out</a>!
                        </div>
@@ -642,7 +687,9 @@
                          This is a danger alert — <a href="#" class="alert-link">check it out</a>!
                        </div>
                      </div>
-                      <div class="highlight">
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
  This is a success alert — <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">&gt;</span>check it out<span class="nt">&lt;/a&gt;</span>!
 <span class="nt">&lt;/div&gt;</span>
@@ -655,9 +702,12 @@
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
  This is a danger alert — <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">&gt;</span>check it out<span class="nt">&lt;/a&gt;</span>!
 <span class="nt">&lt;/div&gt;</span></code></pre>
+                      </figure>
                    </div>
-                      <h3 id="dismissible-alerts">Dismissible Alerts</h3>
-                      <div class="example">
+                    <h2 id="dismissible-alerts">Dismissible alerts</h2>
+                    <p>Add the <code class="highlighter-rouge">x</code> close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.</p>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
                        <div class="alert alert-success alert-dismissible" role="alert">
                          This is a success alert — check it out!
                          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
@@ -675,7 +725,9 @@
                          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                        </div>
                      </div>
-                      <div class="highlight">
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
  This is a success alert — check it out!
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/a&gt;</span>
@@ -692,46 +744,71 @@
  This is a danger alert — check it out!
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/a&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
+                      </figure>
                    </div>
-                      <h3 id="alerts-with-icons">Alerts with icons</h3>
-                      <div class="example">
+                    <h2 id="alerts-with-icons">Alerts with icons</h2>
+                    <p>Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.</p>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
                        <div class="alert alert-success" role="alert">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                          <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" />
+                            <polyline points="20 7 10 17 5 12" />
+                          </svg>
                          This is a success alert — check it out!
                        </div>
                        <div class="alert alert-info" role="alert">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
+                          <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" />
+                            <circle cx="12" cy="12" r="9" />
+                            <line x1="12" y1="8" x2="12.01" y2="8" />
+                            <polyline points="11 12 12 12 12 16 13 16" />
+                          </svg>
                          This is a info alert — check it out!
                        </div>
                        <div class="alert alert-warning" role="alert">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+                          <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" />
+                            <path d="M12 9v2m0 4v.01" />
+                            <path d="M5.07 19H19a2 2 0 0 0 1.75 -2.75L13.75 4a2 2 0 0 0 -3.5 0L3.25 16.25a2 2 0 0 0 1.75 2.75" />
+                          </svg>
                          This is a warning alert — check it out!
                        </div>
                        <div class="alert alert-danger" role="alert">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
+                          <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" />
+                            <circle cx="12" cy="12" r="9" />
+                            <line x1="12" y1="8" x2="12" y2="12" />
+                            <line x1="12" y1="16" x2="12.01" y2="16" />
+                          </svg>
                          This is a danger alert — check it out!
                        </div>
                      </div>
-                      <div class="highlight">
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</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 mr-1"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"20 6 9 17 4 12"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
+  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  This is a success alert — check it out!
 <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info"</span> <span class="na">role=</span><span class="s">"alert"</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 mr-1"</span><span class="nt">&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"12"</span> <span class="na">cy=</span><span class="s">"12"</span> <span class="na">r=</span><span class="s">"10"</span><span class="nt">&gt;&lt;/circle&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"16"</span> <span class="na">x2=</span><span class="s">"12"</span> <span class="na">y2=</span><span class="s">"12"</span><span class="nt">&gt;&lt;/line&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"8"</span> <span class="na">x2=</span><span class="s">"12.01"</span> <span class="na">y2=</span><span class="s">"8"</span><span class="nt">&gt;&lt;/line&gt;&lt;/svg&gt;</span>
+  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  This is a info alert — check it out!
 <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</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 mr-1"</span><span class="nt">&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"</span><span class="nt">&gt;&lt;/path&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"9"</span> <span class="na">x2=</span><span class="s">"12"</span> <span class="na">y2=</span><span class="s">"13"</span><span class="nt">&gt;&lt;/line&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"17"</span> <span class="na">x2=</span><span class="s">"12.01"</span> <span class="na">y2=</span><span class="s">"17"</span><span class="nt">&gt;&lt;/line&gt;&lt;/svg&gt;</span>
+  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  This is a warning alert — check it out!
 <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</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 mr-1"</span><span class="nt">&gt;&lt;polygon</span> <span class="na">points=</span><span class="s">"7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"</span><span class="nt">&gt;&lt;/polygon&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"15"</span> <span class="na">y1=</span><span class="s">"9"</span> <span class="na">x2=</span><span class="s">"9"</span> <span class="na">y2=</span><span class="s">"15"</span><span class="nt">&gt;&lt;/line&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"9"</span> <span class="na">y1=</span><span class="s">"9"</span> <span class="na">x2=</span><span class="s">"15"</span> <span class="na">y2=</span><span class="s">"15"</span><span class="nt">&gt;&lt;/line&gt;&lt;/svg&gt;</span>
+  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  This is a danger alert — check it out!
 <span class="nt">&lt;/div&gt;</span></code></pre>
+                      </figure>
                    </div>
-                      <h3 id="alert-with-avatar">Alert with avatar</h3>
-                      <div class="example">
+                    <h2 id="alert-with-avatar">Alert with avatar</h2>
+                    <p>Add an avatar to your alert modal to make it more personalized.</p>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
                        <div class="alert alert-success" role="alert">
                          <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -749,9 +826,11 @@
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        </div>
                      </div>
-                      <div class="highlight">
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</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;&lt;/span&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(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
@@ -759,16 +838,19 @@
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</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;&lt;/span&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(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</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/003m.jpg)"</span><span class="nt">&gt;&lt;/span&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(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 <span class="nt">&lt;/div&gt;</span></code></pre>
+                      </figure>
                    </div>
-                      <h3 id="alert-with-buttons">Alert with buttons</h3>
-                      <div class="example">
+                    <h2 id="alert-with-buttons">Alert with buttons</h2>
+                    <p>Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message.</p>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
                        <div class="alert alert-success alert-dismissible" role="alert">
                          <h3>Some Title</h3>
                          <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
@@ -779,7 +861,9 @@
                          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                        </div>
                      </div>
-                      <div class="highlight">
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;h3&gt;</span>Some Title<span class="nt">&lt;/h3&gt;</span>
  <span class="nt">&lt;p&gt;</span>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.<span class="nt">&lt;/p&gt;</span>
@@ -789,20 +873,41 @@
  <span class="nt">&lt;/div&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">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/a&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
+                      </figure>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
-          </main>
        </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>
+    <script src="../dist/libs/jquery/dist/jquery.slim.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/docs/autosize.html
+++ b/demo/docs/autosize.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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>Autosize - Documentation - 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,124 +24,143 @@
    <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>Autosize - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="description" content="A small, stand-alone script to automatically adjust textarea height."/>
+    <meta name="description" content="The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type."/>
    <!-- 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"/>
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/css/tabler.min.css" 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"/>
+    <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-buttons.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">
+      <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 hide-sidebar-visible m-0">
-                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+          <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>
-              <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"/>
+          <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"/>
+                  <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>
-                    Source code
+                <span class="badge bg-red"></span>
              </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>
+              <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 dropdown-menu-arrow">
+              <div class="dropdown-menu dropdown-menu-right">
                <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
+                  <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"/>
+                    <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.37.996.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" 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
+                  <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"/>
+                    <path d="M9 7 h-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" 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>
+                <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"/>
+                    <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 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>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <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"/>
+                      <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"/>
+                      <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 >
@@ -147,14 +168,39 @@
                      Cards
                    </a>
                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../dropdowns.html" >
+                      Dropdowns
+                    </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="../tables.html" >
+                      Tables
                    </a>
                  </li>
                  <li >
@@ -172,26 +218,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
@@ -219,40 +245,29 @@
                  </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>
+                <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"/>
+                      <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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                    </svg>
                  </span>
+                  <span class="nav-link-title">
                    Extra
+                  </span>
                </a>
                <ul class="dropdown-menu">
                  <li >
@@ -275,17 +290,116 @@
                      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>
+                </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"/>
+                      <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-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 active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" 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"><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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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>
-                    Documentation
                </a>
-                  <ul class="dropdown-menu">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
                  <li >
                    <a class="dropdown-item" href="../docs/index.html" >
                      Introduction
@@ -351,6 +465,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
@@ -382,8 +501,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 >
@@ -404,7 +523,6 @@
                  <li >
                    <a class="dropdown-item" href="../docs/ribbons.html" >
                      Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
                    </a>
                  </li>
                  <li >
@@ -450,11 +568,15 @@
                </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"/>
+                      <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>
@@ -462,11 +584,11 @@
            </div>
          </div>
        </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
+      </div>
+      <div class="content">
+        <div class="container-xl">
          <!-- Page title -->
-            <div class="page-title-box">
+          <div class="page-header">
            <div class="row align-items-center">
              <div class="col-auto">
                <h2 class="page-title">
@@ -476,143 +598,86 @@
            </div>
          </div>
          <div class="row justify-content-center">
-              <div class="col-lg-3 order-lg-1 mb-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-secondary mb-4 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+            <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
+              <div class="sticky-top">
+                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" 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>
                  Browse source code
                </a>
-                <div class="list-group list-group-transparent mb-0">
-                  <a href="../docs/index.html" class="list-group-item list-group-item-action">
-                    Introduction
-                  </a>
-                  <a href="../docs/alerts.html" class="list-group-item list-group-item-action">
-                    Alerts
-                  </a>
-                  <a href="../docs/autosize.html" class="list-group-item list-group-item-action active">
-                    Autosize
-                  </a>
-                  <a href="../docs/avatars.html" class="list-group-item list-group-item-action">
-                    Avatars
-                  </a>
-                  <a href="../docs/badges.html" class="list-group-item list-group-item-action">
-                    Badges
-                  </a>
-                  <a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action">
-                    Breadcrumb
-                  </a>
-                  <a href="../docs/buttons.html" class="list-group-item list-group-item-action">
-                    Buttons
-                  </a>
-                  <a href="../docs/cards.html" class="list-group-item list-group-item-action">
-                    Cards
-                  </a>
-                  <a href="../docs/carousel.html" class="list-group-item list-group-item-action">
-                    Carousel
-                  </a>
-                  <a href="../docs/colors.html" class="list-group-item list-group-item-action">
-                    Colors
-                  </a>
-                  <a href="../docs/countup.html" class="list-group-item list-group-item-action">
-                    Countup
-                  </a>
-                  <a href="../docs/cursors.html" class="list-group-item list-group-item-action">
-                    Cursors
-                  </a>
-                  <a href="../docs/charts.html" class="list-group-item list-group-item-action">
-                    Charts
-                  </a>
-                  <a href="../docs/divider.html" class="list-group-item list-group-item-action">
-                    Divider
-                  </a>
-                  <a href="../docs/empty.html" class="list-group-item list-group-item-action">
-                    Empty states
-                  </a>
-                  <a href="../docs/flags.html" class="list-group-item list-group-item-action">
-                    Flags
-                  </a>
-                  <a href="../docs/form-elements.html" class="list-group-item list-group-item-action">
-                    Form elements
-                  </a>
-                  <a href="../docs/form-helpers.html" class="list-group-item list-group-item-action">
-                    Form helpers
-                  </a>
-                  <a href="../docs/input-mask.html" class="list-group-item list-group-item-action">
-                    Form input mask
-                  </a>
-                  <a href="../docs/layout.html" class="list-group-item list-group-item-action">
-                    Layout
-                  </a>
-                  <a href="../docs/progress.html" class="list-group-item list-group-item-action">
-                    Progress
-                  </a>
-                  <a href="../docs/payments.html" class="list-group-item list-group-item-action">
-                    Payments
-                  </a>
-                  <a href="../docs/range-slider.html" class="list-group-item list-group-item-action">
-                    Range slider
-                  </a>
-                  <a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
-                    Ribbons
-                    <span class="badge bg-green ml-auto">New</span>
-                  </a>
-                  <a href="../docs/spinners.html" class="list-group-item list-group-item-action">
-                    Spinners
-                  </a>
-                  <a href="../docs/steps.html" class="list-group-item list-group-item-action">
-                    Steps
-                  </a>
-                  <a href="../docs/tables.html" class="list-group-item list-group-item-action">
-                    Tables
-                  </a>
-                  <a href="../docs/tabs.html" class="list-group-item list-group-item-action">
-                    Tabs
-                  </a>
-                  <a href="../docs/timelines.html" class="list-group-item list-group-item-action">
-                    Timelines
-                  </a>
-                  <a href="../docs/toasts.html" class="list-group-item list-group-item-action">
-                    Toasts
-                  </a>
-                  <a href="../docs/tooltips.html" class="list-group-item list-group-item-action">
-                    Tooltips
-                  </a>
-                  <a href="../docs/typography.html" class="list-group-item list-group-item-action">
-                    Typography
-                  </a>
+                <h5 class="subheader">On this page</h5>
+                <ul class="list-unstyled">
+                  <li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
+                </ul>
              </div>
            </div>
            <div class="col-lg-9">
-                <div class="card">
-                  <div class="card-body p-md-6 p-xl-7">
+              <div class="card card-lg">
+                <div class="card-body">
                  <div class="markdown">
-                      <h2 class="h1 mt-0 mb-3">Autosize
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                      </h2>
-                      <p>A small, stand-alone script to automatically adjust textarea height.</p>
-                      <h3 id="default-markup">Default markup</h3>
-                      <div class="example">
+                    <div class="d-flex">
+                      <h2 class="h1 mt-0 mb-3">Autosize</h2>
+                    </div>
+                    <p>The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.</p>
+                    <h2 id="default-markup">Default markup</h2>
+                    <p>Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it.</p>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
                        <label class="form-label">Autosize example</label>
                        <textarea class="form-control" data-toggle="autosize" placeholder="Typing something…"></textarea>
                      </div>
-                      <div class="highlight">
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Autosize example<span class="nt">&lt;/label&gt;</span>
 <span class="nt">&lt;textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">data-toggle=</span><span class="s">"autosize"</span> <span class="na">placeholder=</span><span class="s">"Typing something…"</span><span class="nt">&gt;&lt;/textarea&gt;</span></code></pre>
+                      </figure>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
-          </main>
        </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>
+    <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
+    <script src="../dist/libs/autosize/dist/autosize.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>
+      (function () {
+      	const elements = document.querySelectorAll('[data-toggle="autosize"]');
+      	if (elements.length) {
+      		elements.forEach(function (element) {
+      			autosize(element);
+      		});
+      	}
+      })();
+    </script>
+    <script>
+      document.body.style.display = "block"
+    </script>
  </body>
 </html>
--- a/demo/docs/avatars.html
+++ b/demo/docs/avatars.html
--- a/demo/docs/badges.html
+++ b/demo/docs/badges.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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>Badges - Documentation - 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,124 +24,143 @@
    <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>Badges - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="description" content="A small count and labeling component."/>
+    <meta name="description" content="Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users&#39; attention to a new element, notify about unread messages or provide any kind of additional info."/>
    <!-- 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"/>
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/css/tabler.min.css" 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"/>
+    <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-buttons.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">
+      <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 hide-sidebar-visible m-0">
-                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+          <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>
-              <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"/>
+          <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"/>
+                  <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>
-                    Source code
+                <span class="badge bg-red"></span>
              </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>
+              <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 dropdown-menu-arrow">
+              <div class="dropdown-menu dropdown-menu-right">
                <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
+                  <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"/>
+                    <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.37.996.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" 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
+                  <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"/>
+                    <path d="M9 7 h-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" 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>
+                <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"/>
+                    <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 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>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <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"/>
+                      <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"/>
+                      <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 >
@@ -147,14 +168,39 @@
                      Cards
                    </a>
                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../dropdowns.html" >
+                      Dropdowns
+                    </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="../tables.html" >
+                      Tables
                    </a>
                  </li>
                  <li >
@@ -172,26 +218,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
@@ -219,40 +245,29 @@
                  </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>
+                <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"/>
+                      <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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                    </svg>
                  </span>
+                  <span class="nav-link-title">
                    Extra
+                  </span>
                </a>
                <ul class="dropdown-menu">
                  <li >
@@ -275,17 +290,116 @@
                      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>
+                </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"/>
+                      <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-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 active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" 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"><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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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>
-                    Documentation
                </a>
-                  <ul class="dropdown-menu">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
                  <li >
                    <a class="dropdown-item" href="../docs/index.html" >
                      Introduction
@@ -351,6 +465,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
@@ -382,8 +501,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 >
@@ -404,7 +523,6 @@
                  <li >
                    <a class="dropdown-item" href="../docs/ribbons.html" >
                      Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
                    </a>
                  </li>
                  <li >
@@ -450,11 +568,15 @@
                </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"/>
+                      <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>
@@ -462,11 +584,11 @@
            </div>
          </div>
        </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
+      </div>
+      <div class="content">
+        <div class="container-xl">
          <!-- Page title -->
-            <div class="page-title-box">
+          <div class="page-header">
            <div class="row align-items-center">
              <div class="col-auto">
                <h2 class="page-title">
@@ -476,129 +598,52 @@
            </div>
          </div>
          <div class="row justify-content-center">
-              <div class="col-lg-3 order-lg-1 mb-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-secondary mb-4 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+            <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
+              <div class="sticky-top">
+                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" 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>
                  Browse source code
                </a>
-                <div class="list-group list-group-transparent mb-0">
-                  <a href="../docs/index.html" class="list-group-item list-group-item-action">
-                    Introduction
-                  </a>
-                  <a href="../docs/alerts.html" class="list-group-item list-group-item-action">
-                    Alerts
-                  </a>
-                  <a href="../docs/autosize.html" class="list-group-item list-group-item-action">
-                    Autosize
-                  </a>
-                  <a href="../docs/avatars.html" class="list-group-item list-group-item-action">
-                    Avatars
-                  </a>
-                  <a href="../docs/badges.html" class="list-group-item list-group-item-action active">
-                    Badges
-                  </a>
-                  <a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action">
-                    Breadcrumb
-                  </a>
-                  <a href="../docs/buttons.html" class="list-group-item list-group-item-action">
-                    Buttons
-                  </a>
-                  <a href="../docs/cards.html" class="list-group-item list-group-item-action">
-                    Cards
-                  </a>
-                  <a href="../docs/carousel.html" class="list-group-item list-group-item-action">
-                    Carousel
-                  </a>
-                  <a href="../docs/colors.html" class="list-group-item list-group-item-action">
-                    Colors
-                  </a>
-                  <a href="../docs/countup.html" class="list-group-item list-group-item-action">
-                    Countup
-                  </a>
-                  <a href="../docs/cursors.html" class="list-group-item list-group-item-action">
-                    Cursors
-                  </a>
-                  <a href="../docs/charts.html" class="list-group-item list-group-item-action">
-                    Charts
-                  </a>
-                  <a href="../docs/divider.html" class="list-group-item list-group-item-action">
-                    Divider
-                  </a>
-                  <a href="../docs/empty.html" class="list-group-item list-group-item-action">
-                    Empty states
-                  </a>
-                  <a href="../docs/flags.html" class="list-group-item list-group-item-action">
-                    Flags
-                  </a>
-                  <a href="../docs/form-elements.html" class="list-group-item list-group-item-action">
-                    Form elements
-                  </a>
-                  <a href="../docs/form-helpers.html" class="list-group-item list-group-item-action">
-                    Form helpers
-                  </a>
-                  <a href="../docs/input-mask.html" class="list-group-item list-group-item-action">
-                    Form input mask
-                  </a>
-                  <a href="../docs/layout.html" class="list-group-item list-group-item-action">
-                    Layout
-                  </a>
-                  <a href="../docs/progress.html" class="list-group-item list-group-item-action">
-                    Progress
-                  </a>
-                  <a href="../docs/payments.html" class="list-group-item list-group-item-action">
-                    Payments
-                  </a>
-                  <a href="../docs/range-slider.html" class="list-group-item list-group-item-action">
-                    Range slider
-                  </a>
-                  <a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
-                    Ribbons
-                    <span class="badge bg-green ml-auto">New</span>
-                  </a>
-                  <a href="../docs/spinners.html" class="list-group-item list-group-item-action">
-                    Spinners
-                  </a>
-                  <a href="../docs/steps.html" class="list-group-item list-group-item-action">
-                    Steps
-                  </a>
-                  <a href="../docs/tables.html" class="list-group-item list-group-item-action">
-                    Tables
-                  </a>
-                  <a href="../docs/tabs.html" class="list-group-item list-group-item-action">
-                    Tabs
-                  </a>
-                  <a href="../docs/timelines.html" class="list-group-item list-group-item-action">
-                    Timelines
-                  </a>
-                  <a href="../docs/toasts.html" class="list-group-item list-group-item-action">
-                    Toasts
-                  </a>
-                  <a href="../docs/tooltips.html" class="list-group-item list-group-item-action">
-                    Tooltips
-                  </a>
-                  <a href="../docs/typography.html" class="list-group-item list-group-item-action">
-                    Typography
-                  </a>
+                <h5 class="subheader">On this page</h5>
+                <ul class="list-unstyled">
+                  <li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
+                  <li class="toc-entry toc-h2"><a href="#pill-badges">Pill badges</a></li>
+                  <li class="toc-entry toc-h2"><a href="#soft-color-badges">Soft color badges</a></li>
+                  <li class="toc-entry toc-h2"><a href="#links">Links</a></li>
+                  <li class="toc-entry toc-h2"><a href="#empty-badges">Empty badges</a>
+                    <ul>
+                      <li class="toc-entry toc-h3"><a href="#badge-add-ons">Badge add-ons</a></li>
+                      <li class="toc-entry toc-h3"><a href="#badge-avatars">Badge avatars</a></li>
+                    </ul>
+                  </li>
+                </ul>
              </div>
            </div>
            <div class="col-lg-9">
-                <div class="card">
-                  <div class="card-body p-md-6 p-xl-7">
+              <div class="card card-lg">
+                <div class="card-body">
                  <div class="markdown">
-                      <p class="mb-4 float-right">
+                    <div class="d-flex">
+                      <h2 class="h1 mt-0 mb-3">Badges</h2>
+                      <p class="ml-auto">
                        <a href="https://getbootstrap.com/docs/4.4/components/badge/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                          Bootstrap documentation
                        </a>
                      </p>
-                      <h2 class="h1 mt-0 mb-3">Badges
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                      </h2>
-                      <p>A small count and labeling component.</p>
-                      <h3 id="default-markup">Default markup</h3>
-                      <div class="example">
+                    </div>
+                    <p>Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.</p>
+                    <h2 id="default-markup">Default markup</h2>
+                    <p>The default badges are square and come in the basic set of colors.</p>
+                    <div class="example no_toc_section example-centered">
+                      <div class="example-content">
                        <span class="badge bg-blue">blue</span>
                        <span class="badge bg-azure">azure</span>
                        <span class="badge bg-indigo">indigo</span>
@@ -613,7 +658,9 @@
                        <span class="badge bg-cyan">cyan</span>
                        <span class="badge bg-gray">gray</span>
                      </div>
-                      <div class="highlight">
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-blue"</span><span class="nt">&gt;</span>blue<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-azure"</span><span class="nt">&gt;</span>azure<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-indigo"</span><span class="nt">&gt;</span>indigo<span class="nt">&lt;/span&gt;</span>
@@ -627,10 +674,12 @@
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-teal"</span><span class="nt">&gt;</span>teal<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-cyan"</span><span class="nt">&gt;</span>cyan<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-gray"</span><span class="nt">&gt;</span>gray<span class="nt">&lt;/span&gt;</span></code></pre>
+                      </figure>
                    </div>
-                      <h3 id="pill-badges">Pill badges</h3>
-                      <p>To make a pill bagde (with rounded corners) add <code class="highlighter-rouge">.bagde-pill</code> class.</p>
-                      <div class="example">
+                    <h2 id="pill-badges">Pill badges</h2>
+                    <p>Use the <code class="highlighter-rouge">.bagde-pill</code> class if you want to create a badge with rounded corners. Its width will adjust to the label text.</p>
+                    <div class="example no_toc_section example-centered">
+                      <div class="example-content">
                        <span class="badge badge-pill bg-blue">1</span>
                        <span class="badge badge-pill bg-azure">2</span>
                        <span class="badge badge-pill bg-indigo">3</span>
@@ -645,7 +694,9 @@
                        <span class="badge badge-pill bg-cyan">12</span>
                        <span class="badge badge-pill bg-gray">13</span>
                      </div>
-                      <div class="highlight">
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-blue"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-azure"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-indigo"</span><span class="nt">&gt;</span>3<span class="nt">&lt;/span&gt;</span>
@@ -659,10 +710,12 @@
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-teal"</span><span class="nt">&gt;</span>11<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-cyan"</span><span class="nt">&gt;</span>12<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-gray"</span><span class="nt">&gt;</span>13<span class="nt">&lt;/span&gt;</span></code></pre>
+                      </figure>
                    </div>
-                      <h3 id="soft-badges">Soft badges</h3>
-                      <p>Creates a soft variant of a corresponding contextual badge variation. You can click <a href="./colors.html">here</a> to see the list of available colors.</p>
-                      <div class="example">
+                    <h2 id="soft-color-badges">Soft color badges</h2>
+                    <p>You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click <a href="./colors.html">here</a> to see the list of available colors and choose ones that best suit your design.</p>
+                    <div class="example no_toc_section example-centered">
+                      <div class="example-content">
                        <span class="badge bg-blue-lt">blue</span>
                        <span class="badge bg-azure-lt">azure</span>
                        <span class="badge bg-indigo-lt">indigo</span>
@@ -677,7 +730,9 @@
                        <span class="badge bg-cyan-lt">cyan</span>
                        <span class="badge bg-gray-lt">gray</span>
                      </div>
-                      <div class="highlight">
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-blue-lt"</span><span class="nt">&gt;</span>blue<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-azure-lt"</span><span class="nt">&gt;</span>azure<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-indigo-lt"</span><span class="nt">&gt;</span>indigo<span class="nt">&lt;/span&gt;</span>
@@ -691,10 +746,12 @@
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-teal-lt"</span><span class="nt">&gt;</span>teal<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-cyan-lt"</span><span class="nt">&gt;</span>cyan<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-gray-lt"</span><span class="nt">&gt;</span>gray<span class="nt">&lt;/span&gt;</span></code></pre>
+                      </figure>
                    </div>
-                      <h3 id="links">Links</h3>
-                      <p>Make a badge work as a link by putting it into an <code class="highlighter-rouge">&lt;a&gt;</code> element.</p>
-                      <div class="example">
+                    <h2 id="links">Links</h2>
+                    <p>Place the badge within an <code class="highlighter-rouge">&lt;a&gt;</code> element if you want it to perform the function of a link and make it clickable.</p>
+                    <div class="example no_toc_section example-centered">
+                      <div class="example-content">
                        <a href="#" class="badge bg-blue">blue</a>
                        <a href="#" class="badge bg-azure">azure</a>
                        <a href="#" class="badge bg-indigo">indigo</a>
@@ -709,7 +766,9 @@
                        <a href="#" class="badge bg-cyan">cyan</a>
                        <a href="#" class="badge bg-gray">gray</a>
                      </div>
-                      <div class="highlight">
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-blue"</span><span class="nt">&gt;</span>blue<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">"badge bg-azure"</span><span class="nt">&gt;</span>azure<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">"badge bg-indigo"</span><span class="nt">&gt;</span>indigo<span class="nt">&lt;/a&gt;</span>
@@ -723,10 +782,12 @@
 <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-teal"</span><span class="nt">&gt;</span>teal<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">"badge bg-cyan"</span><span class="nt">&gt;</span>cyan<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">"badge bg-gray"</span><span class="nt">&gt;</span>gray<span class="nt">&lt;/a&gt;</span></code></pre>
+                      </figure>
                    </div>
-                      <h3 id="empty-badges">Empty badges</h3>
-                      <p>If you don’t want your badge to contain any text you can do it by leaving the html element empty.</p>
-                      <div class="example">
+                    <h2 id="empty-badges">Empty badges</h2>
+                    <p>Leave the HTML element empty if you want to create badges without any text. Empty badges are particularly useful if you want to make an interface element more noticeable regardless of limited space.</p>
+                    <div class="example no_toc_section example-centered">
+                      <div class="example-content">
                        <a href="#" class="badge bg-blue"></a>
                        <a href="#" class="badge bg-azure"></a>
                        <a href="#" class="badge bg-indigo"></a>
@@ -741,7 +802,9 @@
                        <a href="#" class="badge bg-cyan"></a>
                        <a href="#" class="badge bg-gray"></a>
                      </div>
-                      <div class="highlight">
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-blue"</span><span class="nt">&gt;&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">"badge bg-azure"</span><span class="nt">&gt;&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">"badge bg-indigo"</span><span class="nt">&gt;&lt;/a&gt;</span>
@@ -755,20 +818,125 @@
 <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-teal"</span><span class="nt">&gt;&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">"badge bg-cyan"</span><span class="nt">&gt;&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">"badge bg-gray"</span><span class="nt">&gt;&lt;/a&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                    <h3 id="badge-add-ons">Badge add-ons</h3>
+                    <p>Add the <code class="highlighter-rouge">.badge-addon</code> class to create an add-on that will customize your badge and make it more noticeable. You can use any color variants and combine them as you see fit.</p>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <span class="badge bg-green">
+                          task
+                          <span class="badge-addon ">finished</span>
+                        </span>
+                        <span class="badge bg-purple">
+                          bundle
+                          <span class="badge-addon ">passing</span>
+                        </span>
+                        <span class="badge bg-red-lt">
+                          CSS gzip size
+                          <span class="badge-addon bg-red">20.9kB</span>
+                        </span>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;</span>
+  task
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge-addon "</span><span class="nt">&gt;</span>finished<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-purple"</span><span class="nt">&gt;</span>
+  bundle
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge-addon "</span><span class="nt">&gt;</span>passing<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-red-lt"</span><span class="nt">&gt;</span>
+  CSS gzip size
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge-addon bg-red"</span><span class="nt">&gt;</span>20.9kB<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;/span&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                    <h3 id="badge-avatars">Badge avatars</h3>
+                    <p>Create the <code class="highlighter-rouge">.badge-avatar</code> class to add an avatar that will make a badge more personalized.</p>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <span class="badge bg-blue">
+                          <span class="badge-avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                          Paweł Kuna
+                        </span>
+                        <span class="badge bg-blue">
+                          <span class="badge-avatar" style="background-image: url(../)">JL</span>
+                          Jeffie Lewzey
+                        </span>
+                        <span class="badge bg-blue">
+                          <span class="badge-avatar" style="background-image: url(../static/avatars/002m.jpg)"></span>
+                          Mallory Hulme
+                        </span>
+                        <span class="badge bg-blue">
+                          <span class="badge-avatar" style="background-image: url(../static/avatars/003m.jpg)"></span>
+                          Dunn Slane
+                        </span>
+                        <span class="badge bg-blue">
+                          <span class="badge-avatar" style="background-image: url(../static/avatars/000f.jpg)"></span>
+                          Emmy Levet
+                        </span>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-blue"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge-avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+  Paweł Kuna
+<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-blue"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge-avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
+  Jeffie Lewzey
+<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-blue"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge-avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+  Mallory Hulme
+<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-blue"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge-avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+  Dunn Slane
+<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-blue"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge-avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+  Emmy Levet
+<span class="nt">&lt;/span&gt;</span></code></pre>
+                      </figure>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
-          </main>
        </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>
+    <script src="../dist/libs/jquery/dist/jquery.slim.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/docs/breadcrumb.html
+++ b/demo/docs/breadcrumb.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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>Breadcrumb - Documentation - 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,124 +24,143 @@
    <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>Breadcrumb - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="description" content="Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS."/>
+    <meta name="description" content="Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure."/>
    <!-- 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"/>
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/css/tabler.min.css" 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"/>
+    <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-buttons.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">
+      <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 hide-sidebar-visible m-0">
-                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+          <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>
-              <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"/>
+          <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"/>
+                  <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>
-                    Source code
+                <span class="badge bg-red"></span>
              </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>
+              <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 dropdown-menu-arrow">
+              <div class="dropdown-menu dropdown-menu-right">
                <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
+                  <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"/>
+                    <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.37.996.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" 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
+                  <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"/>
+                    <path d="M9 7 h-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" 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>
+                <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"/>
+                    <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 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>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <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"/>
+                      <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"/>
+                      <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 >
@@ -147,14 +168,39 @@
                      Cards
                    </a>
                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../dropdowns.html" >
+                      Dropdowns
+                    </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="../tables.html" >
+                      Tables
                    </a>
                  </li>
                  <li >
@@ -172,26 +218,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
@@ -219,40 +245,29 @@
                  </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>
+                <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"/>
+                      <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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                    </svg>
                  </span>
+                  <span class="nav-link-title">
                    Extra
+                  </span>
                </a>
                <ul class="dropdown-menu">
                  <li >
@@ -275,17 +290,116 @@
                      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>
+                </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"/>
+                      <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-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 active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" 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"><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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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>
-                    Documentation
                </a>
-                  <ul class="dropdown-menu">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
                  <li >
                    <a class="dropdown-item" href="../docs/index.html" >
                      Introduction
@@ -351,6 +465,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
@@ -382,8 +501,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 >
@@ -404,7 +523,6 @@
                  <li >
                    <a class="dropdown-item" href="../docs/ribbons.html" >
                      Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
                    </a>
                  </li>
                  <li >
@@ -450,11 +568,15 @@
                </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"/>
+                      <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>
@@ -462,11 +584,11 @@
            </div>
          </div>
        </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
+      </div>
+      <div class="content">
+        <div class="container-xl">
          <!-- Page title -->
-            <div class="page-title-box">
+          <div class="page-header">
            <div class="row align-items-center">
              <div class="col-auto">
                <h2 class="page-title">
@@ -476,215 +598,170 @@
            </div>
          </div>
          <div class="row justify-content-center">
-              <div class="col-lg-3 order-lg-1 mb-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-secondary mb-4 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+            <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
+              <div class="sticky-top">
+                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" 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>
                  Browse source code
                </a>
-                <div class="list-group list-group-transparent mb-0">
-                  <a href="../docs/index.html" class="list-group-item list-group-item-action">
-                    Introduction
-                  </a>
-                  <a href="../docs/alerts.html" class="list-group-item list-group-item-action">
-                    Alerts
-                  </a>
-                  <a href="../docs/autosize.html" class="list-group-item list-group-item-action">
-                    Autosize
-                  </a>
-                  <a href="../docs/avatars.html" class="list-group-item list-group-item-action">
-                    Avatars
-                  </a>
-                  <a href="../docs/badges.html" class="list-group-item list-group-item-action">
-                    Badges
-                  </a>
-                  <a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action active">
-                    Breadcrumb
-                  </a>
-                  <a href="../docs/buttons.html" class="list-group-item list-group-item-action">
-                    Buttons
-                  </a>
-                  <a href="../docs/cards.html" class="list-group-item list-group-item-action">
-                    Cards
-                  </a>
-                  <a href="../docs/carousel.html" class="list-group-item list-group-item-action">
-                    Carousel
-                  </a>
-                  <a href="../docs/colors.html" class="list-group-item list-group-item-action">
-                    Colors
-                  </a>
-                  <a href="../docs/countup.html" class="list-group-item list-group-item-action">
-                    Countup
-                  </a>
-                  <a href="../docs/cursors.html" class="list-group-item list-group-item-action">
-                    Cursors
-                  </a>
-                  <a href="../docs/charts.html" class="list-group-item list-group-item-action">
-                    Charts
-                  </a>
-                  <a href="../docs/divider.html" class="list-group-item list-group-item-action">
-                    Divider
-                  </a>
-                  <a href="../docs/empty.html" class="list-group-item list-group-item-action">
-                    Empty states
-                  </a>
-                  <a href="../docs/flags.html" class="list-group-item list-group-item-action">
-                    Flags
-                  </a>
-                  <a href="../docs/form-elements.html" class="list-group-item list-group-item-action">
-                    Form elements
-                  </a>
-                  <a href="../docs/form-helpers.html" class="list-group-item list-group-item-action">
-                    Form helpers
-                  </a>
-                  <a href="../docs/input-mask.html" class="list-group-item list-group-item-action">
-                    Form input mask
-                  </a>
-                  <a href="../docs/layout.html" class="list-group-item list-group-item-action">
-                    Layout
-                  </a>
-                  <a href="../docs/progress.html" class="list-group-item list-group-item-action">
-                    Progress
-                  </a>
-                  <a href="../docs/payments.html" class="list-group-item list-group-item-action">
-                    Payments
-                  </a>
-                  <a href="../docs/range-slider.html" class="list-group-item list-group-item-action">
-                    Range slider
-                  </a>
-                  <a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
-                    Ribbons
-                    <span class="badge bg-green ml-auto">New</span>
-                  </a>
-                  <a href="../docs/spinners.html" class="list-group-item list-group-item-action">
-                    Spinners
-                  </a>
-                  <a href="../docs/steps.html" class="list-group-item list-group-item-action">
-                    Steps
-                  </a>
-                  <a href="../docs/tables.html" class="list-group-item list-group-item-action">
-                    Tables
-                  </a>
-                  <a href="../docs/tabs.html" class="list-group-item list-group-item-action">
-                    Tabs
-                  </a>
-                  <a href="../docs/timelines.html" class="list-group-item list-group-item-action">
-                    Timelines
-                  </a>
-                  <a href="../docs/toasts.html" class="list-group-item list-group-item-action">
-                    Toasts
-                  </a>
-                  <a href="../docs/tooltips.html" class="list-group-item list-group-item-action">
-                    Tooltips
-                  </a>
-                  <a href="../docs/typography.html" class="list-group-item list-group-item-action">
-                    Typography
-                  </a>
+                <h5 class="subheader">On this page</h5>
+                <ul class="list-unstyled">
+                  <li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
+                  <li class="toc-entry toc-h2"><a href="#breadcrumb-variations">Breadcrumb variations</a></li>
+                  <li class="toc-entry toc-h2"><a href="#alternate-version">Alternate version</a></li>
+                </ul>
              </div>
            </div>
            <div class="col-lg-9">
-                <div class="card">
-                  <div class="card-body p-md-6 p-xl-7">
+              <div class="card card-lg">
+                <div class="card-body">
                  <div class="markdown">
-                      <p class="mb-4 float-right">
+                    <div class="d-flex">
+                      <h2 class="h1 mt-0 mb-3">Breadcrumb</h2>
+                      <p class="ml-auto">
                        <a href="https://getbootstrap.com/docs/4.4/components/breadcrumb/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                          Bootstrap documentation
                        </a>
                      </p>
-                      <h2 class="h1 mt-0 mb-3">Breadcrumb
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                      </h2>
-                      <p>Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.</p>
-                      <h3 id="default-markup">Default markup</h3>
-                      <p>The dividers are automatically created in the content of the <code class="highlighter-rouge">:before</code> pseudo-element of li tags. You can inform the current page using the <code class="highlighter-rouge">active</code> modifier in a <code class="highlighter-rouge">li</code> tag. It will disable the navigation of inner links.</p>
-                      <div class="example">
+                    </div>
+                    <p>Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure.</p>
+                    <h2 id="default-markup">Default markup</h2>
+                    <p>Add the <code class="highlighter-rouge">:before</code> pseudo-element in <code class="highlighter-rouge">li</code> tags to use the default separators. The <code class="highlighter-rouge">active</code> modifier in a <code class="highlighter-rouge">li</code> tag will help you indicate the current page location and facilitate navigation within your website or app.</p>
+                    <div class="example no_toc_section example-centered">
+                      <div class="example-content">
                        <ol class="breadcrumb" aria-label="breadcrumbs">
                          <li class="breadcrumb-item"><a href="#">Home</a></li>
                          <li class="breadcrumb-item"><a href="#">Library</a></li>
                          <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
                        </ol>
                      </div>
-                      <div class="highlight">
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span> <span class="na">aria-label=</span><span class="s">"breadcrumbs"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Library<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Data<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
 <span class="nt">&lt;/ol&gt;</span></code></pre>
+                      </figure>
                    </div>
-                      <h3 id="breadcrumb-variations">Breadcrumb variations</h3>
-                      <p>You can add more variations by modify <code class="highlighter-rouge">$breadcrumb-variants</code> variable in Tabler config.</p>
-                      <div class="example">
+                    <h2 id="breadcrumb-variations">Breadcrumb variations</h2>
+                    <p>If you wish to use different separators, modify the <code class="highlighter-rouge">$breadcrumb-variants</code> variable in the Tabler config. Depending on the aesthetics of your design, you can choose dots, bullets or arrows.</p>
+                    <div class="example no_toc_section example-centered">
+                      <div class="example-content">
                        <ol class="breadcrumb breadcrumb-dots" aria-label="breadcrumbs">
                          <li class="breadcrumb-item"><a href="#">Home</a></li>
                          <li class="breadcrumb-item"><a href="#">Library</a></li>
                          <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
                        </ol>
                      </div>
-                      <div class="highlight">
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb breadcrumb-dots"</span> <span class="na">aria-label=</span><span class="s">"breadcrumbs"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Library<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Data<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
 <span class="nt">&lt;/ol&gt;</span></code></pre>
+                      </figure>
                    </div>
-                      <div class="example">
+                    <div class="example no_toc_section example-centered">
+                      <div class="example-content">
                        <ol class="breadcrumb breadcrumb-arrows" aria-label="breadcrumbs">
                          <li class="breadcrumb-item"><a href="#">Home</a></li>
                          <li class="breadcrumb-item"><a href="#">Library</a></li>
                          <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
                        </ol>
                      </div>
-                      <div class="highlight">
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb breadcrumb-arrows"</span> <span class="na">aria-label=</span><span class="s">"breadcrumbs"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Library<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Data<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
 <span class="nt">&lt;/ol&gt;</span></code></pre>
+                      </figure>
                    </div>
-                      <div class="example">
+                    <div class="example no_toc_section example-centered">
+                      <div class="example-content">
                        <ol class="breadcrumb breadcrumb-bullets" aria-label="breadcrumbs">
                          <li class="breadcrumb-item"><a href="#">Home</a></li>
                          <li class="breadcrumb-item"><a href="#">Library</a></li>
                          <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
                        </ol>
                      </div>
-                      <div class="highlight">
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb breadcrumb-bullets"</span> <span class="na">aria-label=</span><span class="s">"breadcrumbs"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Library<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Data<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
 <span class="nt">&lt;/ol&gt;</span></code></pre>
+                      </figure>
                    </div>
-                      <h3 id="alternate-version">Alternate version</h3>
-                      <div class="example">
+                    <h2 id="alternate-version">Alternate version</h2>
+                    <p>Use the <code class="highlighter-rouge">breadcrumb-alternate</code> class to make the breadcrumb colors more neutral, retaining its function of showing the current location within an interface.</p>
+                    <div class="example no_toc_section example-centered">
+                      <div class="example-content">
                        <ol class="breadcrumb breadcrumb-alternate" aria-label="breadcrumbs">
                          <li class="breadcrumb-item"><a href="#">Home</a></li>
                          <li class="breadcrumb-item"><a href="#">Library</a></li>
                          <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
                        </ol>
                      </div>
-                      <div class="highlight">
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb breadcrumb-alternate"</span> <span class="na">aria-label=</span><span class="s">"breadcrumbs"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Library<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Data<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
 <span class="nt">&lt;/ol&gt;</span></code></pre>
+                      </figure>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
-          </main>
        </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>
+    <script src="../dist/libs/jquery/dist/jquery.slim.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/docs/buttons.html
+++ b/demo/docs/buttons.html
--- a/demo/docs/cards.html
+++ b/demo/docs/cards.html
--- a/demo/docs/carousel.html
+++ b/demo/docs/carousel.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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 - Documentation - 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,124 +24,143 @@
    <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 - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="description" content="The Carousel is a slideshow for cycling through elements."/>
+    <meta name="description" content="A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information."/>
    <!-- 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"/>
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/css/tabler.min.css" 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"/>
+    <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-buttons.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">
+      <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 hide-sidebar-visible m-0">
-                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+          <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>
-              <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"/>
+          <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"/>
+                  <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>
-                    Source code
+                <span class="badge bg-red"></span>
              </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>
+              <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 dropdown-menu-arrow">
+              <div class="dropdown-menu dropdown-menu-right">
                <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
+                  <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"/>
+                    <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.37.996.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" 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
+                  <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"/>
+                    <path d="M9 7 h-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" 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>
+                <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"/>
+                    <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 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>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <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"/>
+                      <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"/>
+                      <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 >
@@ -147,14 +168,39 @@
                      Cards
                    </a>
                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../dropdowns.html" >
+                      Dropdowns
+                    </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="../tables.html" >
+                      Tables
                    </a>
                  </li>
                  <li >
@@ -172,26 +218,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
@@ -219,40 +245,29 @@
                  </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>
+                <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"/>
+                      <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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                    </svg>
                  </span>
+                  <span class="nav-link-title">
                    Extra
+                  </span>
                </a>
                <ul class="dropdown-menu">
                  <li >
@@ -275,17 +290,116 @@
                      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>
+                </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"/>
+                      <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-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 active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" 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"><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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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>
-                    Documentation
                </a>
-                  <ul class="dropdown-menu">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
                  <li >
                    <a class="dropdown-item" href="../docs/index.html" >
                      Introduction
@@ -351,6 +465,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
@@ -382,8 +501,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 >
@@ -404,7 +523,6 @@
                  <li >
                    <a class="dropdown-item" href="../docs/ribbons.html" >
                      Ribbons
-                        <span class="badge bg-green ml-auto">New</span>
                    </a>
                  </li>
                  <li >
@@ -450,11 +568,15 @@
                </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"/>
+                      <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>
@@ -462,11 +584,11 @@
            </div>
          </div>
        </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
+      </div>
+      <div class="content">
+        <div class="container-xl">
          <!-- Page title -->
-            <div class="page-title-box">
+          <div class="page-header">
            <div class="row align-items-center">
              <div class="col-auto">
                <h2 class="page-title">
@@ -476,128 +598,44 @@
            </div>
          </div>
          <div class="row justify-content-center">
-              <div class="col-lg-3 order-lg-1 mb-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-secondary mb-4 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+            <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
+              <div class="sticky-top">
+                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" 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>
                  Browse source code
                </a>
-                <div class="list-group list-group-transparent mb-0">
-                  <a href="../docs/index.html" class="list-group-item list-group-item-action">
-                    Introduction
-                  </a>
-                  <a href="../docs/alerts.html" class="list-group-item list-group-item-action">
-                    Alerts
-                  </a>
-                  <a href="../docs/autosize.html" class="list-group-item list-group-item-action">
-                    Autosize
-                  </a>
-                  <a href="../docs/avatars.html" class="list-group-item list-group-item-action">
-                    Avatars
-                  </a>
-                  <a href="../docs/badges.html" class="list-group-item list-group-item-action">
-                    Badges
-                  </a>
-                  <a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action">
-                    Breadcrumb
-                  </a>
-                  <a href="../docs/buttons.html" class="list-group-item list-group-item-action">
-                    Buttons
-                  </a>
-                  <a href="../docs/cards.html" class="list-group-item list-group-item-action">
-                    Cards
-                  </a>
-                  <a href="../docs/carousel.html" class="list-group-item list-group-item-action active">
-                    Carousel
-                  </a>
-                  <a href="../docs/colors.html" class="list-group-item list-group-item-action">
-                    Colors
-                  </a>
-                  <a href="../docs/countup.html" class="list-group-item list-group-item-action">
-                    Countup
-                  </a>
-                  <a href="../docs/cursors.html" class="list-group-item list-group-item-action">
-                    Cursors
-                  </a>
-                  <a href="../docs/charts.html" class="list-group-item list-group-item-action">
-                    Charts
-                  </a>
-                  <a href="../docs/divider.html" class="list-group-item list-group-item-action">
-                    Divider
-                  </a>
-                  <a href="../docs/empty.html" class="list-group-item list-group-item-action">
-                    Empty states
-                  </a>
-                  <a href="../docs/flags.html" class="list-group-item list-group-item-action">
-                    Flags
-                  </a>
-                  <a href="../docs/form-elements.html" class="list-group-item list-group-item-action">
-                    Form elements
-                  </a>
-                  <a href="../docs/form-helpers.html" class="list-group-item list-group-item-action">
-                    Form helpers
-                  </a>
-                  <a href="../docs/input-mask.html" class="list-group-item list-group-item-action">
-                    Form input mask
-                  </a>
-                  <a href="../docs/layout.html" class="list-group-item list-group-item-action">
-                    Layout
-                  </a>
-                  <a href="../docs/progress.html" class="list-group-item list-group-item-action">
-                    Progress
-                  </a>
-                  <a href="../docs/payments.html" class="list-group-item list-group-item-action">
-                    Payments
-                  </a>
-                  <a href="../docs/range-slider.html" class="list-group-item list-group-item-action">
-                    Range slider
-                  </a>
-                  <a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
-                    Ribbons
-                    <span class="badge bg-green ml-auto">New</span>
-                  </a>
-                  <a href="../docs/spinners.html" class="list-group-item list-group-item-action">
-                    Spinners
-                  </a>
-                  <a href="../docs/steps.html" class="list-group-item list-group-item-action">
-                    Steps
-                  </a>
-                  <a href="../docs/tables.html" class="list-group-item list-group-item-action">
-                    Tables
-                  </a>
-                  <a href="../docs/tabs.html" class="list-group-item list-group-item-action">
-                    Tabs
-                  </a>
-                  <a href="../docs/timelines.html" class="list-group-item list-group-item-action">
-                    Timelines
-                  </a>
-                  <a href="../docs/toasts.html" class="list-group-item list-group-item-action">
-                    Toasts
-                  </a>
-                  <a href="../docs/tooltips.html" class="list-group-item list-group-item-action">
-                    Tooltips
-                  </a>
-                  <a href="../docs/typography.html" class="list-group-item list-group-item-action">
-                    Typography
-                  </a>
+                <h5 class="subheader">On this page</h5>
+                <ul class="list-unstyled">
+                  <li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
+                </ul>
              </div>
            </div>
            <div class="col-lg-9">
-                <div class="card">
-                  <div class="card-body p-md-6 p-xl-7">
+              <div class="card card-lg">
+                <div class="card-body">
                  <div class="markdown">
-                      <p class="mb-4 float-right">
+                    <div class="d-flex">
+                      <h2 class="h1 mt-0 mb-3">Carousel</h2>
+                      <p class="ml-auto">
                        <a href="https://getbootstrap.com/docs/4.4/components/carousel/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                          Bootstrap documentation
                        </a>
                      </p>
-                      <h2 class="h1 mt-0 mb-3">Carousel
-                      </h2>
-                      <p>The Carousel is a slideshow for cycling through elements.</p>
-                      <div class="example example-bg">
-                        <div class="example-column example-column-1">
+                    </div>
+                    <p>A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.</p>
+                    <h2 id="default-markup">Default markup</h2>
+                    <p>Use a carousel to make your website design more visually appealing for users. In the default carousel design, respective elements slide automatically and users can go to the next slide by clicking an arrow.</p>
+                    <div class="example no_toc_section example-centered">
+                      <div class="example-content">
+                        <div style="max-width: 20rem">
                          <div id="carousel-sample" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                              <li data-target="#carousel-sample" data-slide-to="0" class="active"></li>
@@ -634,7 +672,9 @@
                          </div>
                        </div>
                      </div>
-                      <div class="highlight">
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"carousel-sample"</span> <span class="na">class=</span><span class="s">"carousel slide"</span> <span class="na">data-ride=</span><span class="s">"carousel"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"carousel-indicators"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">data-target=</span><span class="s">"#carousel-sample"</span> <span class="na">data-slide-to=</span><span class="s">"0"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">&gt;&lt;/li&gt;</span>
@@ -645,19 +685,19 @@
  <span class="nt">&lt;/ol&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-inner"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item active"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"./static/photos/1b73704b282a8ec6.jpg"</span> <span class="na">data-holder-rendered=</span><span class="s">"true"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">data-holder-rendered=</span><span class="s">"true"</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">"carousel-item"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"./static/photos/3d2998219313cd37.jpg"</span> <span class="na">data-holder-rendered=</span><span class="s">"true"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">data-holder-rendered=</span><span class="s">"true"</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">"carousel-item"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"./static/photos/6ab3200b14549f8a.jpg"</span> <span class="na">data-holder-rendered=</span><span class="s">"true"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">data-holder-rendered=</span><span class="s">"true"</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">"carousel-item"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"./static/photos/6d35d9a2bd6c63c2.jpg"</span> <span class="na">data-holder-rendered=</span><span class="s">"true"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">data-holder-rendered=</span><span class="s">"true"</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">"carousel-item"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"./static/photos/8a26974ee6444acd.jpg"</span> <span class="na">data-holder-rendered=</span><span class="s">"true"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">data-holder-rendered=</span><span class="s">"true"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"carousel-control-prev"</span> <span class="na">href=</span><span class="s">"#carousel-sample"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"prev"</span><span class="nt">&gt;</span>
@@ -669,20 +709,41 @@
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
+                      </figure>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
-          </main>
        </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>
+    <script src="../dist/libs/jquery/dist/jquery.slim.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/docs/charts.html
+++ b/demo/docs/charts.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,6 +12,8 @@
    <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>Charts - Documentation - 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,142 @@
    <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>Charts - Documentation - 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"/>
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
+    <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/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/css/tabler.min.css" 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"/>
+    <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-buttons.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">
+      <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 hide-sidebar-visible m-0">
-                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+          <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>
-              <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"/>
+          <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"/>
+                  <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>
-                    Source code
+                <span class="badge bg-red"></span>
              </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>
+              <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 dropdown-menu-arrow">
+              <div class="dropdown-menu dropdown-menu-right">
                <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
+                  <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"/>
+                    <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.37.996.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" 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
+                  <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"/>
+                    <path d="M9 7 h-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" 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>
+                <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"/>
+                    <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 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>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <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"/>
+                      <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"/>
+                      <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 +167,39 @@
                      Cards
                    </a>
                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../dropdowns.html" >
+                      Dropdowns
+                    </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="../tables.html" >
+                      Tables
                    </a>
                  </li>
                  <li >
@@ -171,26 +217,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
@@ -218,40 +244,29 @@
                  </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>
+                <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"/>
+                      <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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                    </svg>
                  </span>
+                  <span class="nav-link-title">
                    Extra
+                  </span>
                </a>
                <ul class="dropdown-menu">
                  <li >
@@ -274,17 +289,116 @@
                      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>
+                </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"/>
+                      <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-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 active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" 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"><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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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>
-                    Documentation
                </a>
-                  <ul class="dropdown-menu">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
                  <li >
                    <a class="dropdown-item" href="../docs/index.html" >
                      Introduction
@@ -350,6 +464,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 +500,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 +522,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 +567,15 @@
                </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"/>
+                      <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,11 +583,11 @@
            </div>
          </div>
        </div>
-        </header>
-        <div class="content-page">
-          <main class="container my-4 flex-fill">
+      </div>
+      <div class="content">
+        <div class="container-xl">
          <!-- Page title -->
-            <div class="page-title-box">
+          <div class="page-header">
            <div class="row align-items-center">
              <div class="col-auto">
                <h2 class="page-title">
@@ -475,133 +597,61 @@
            </div>
          </div>
          <div class="row justify-content-center">
-              <div class="col-lg-3 order-lg-1 mb-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-secondary mb-4 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+            <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
+              <div class="sticky-top">
+                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" 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>
                  Browse source code
                </a>
-                <div class="list-group list-group-transparent mb-0">
-                  <a href="../docs/index.html" class="list-group-item list-group-item-action">
-                    Introduction
-                  </a>
-                  <a href="../docs/alerts.html" class="list-group-item list-group-item-action">
-                    Alerts
-                  </a>
-                  <a href="../docs/autosize.html" class="list-group-item list-group-item-action">
-                    Autosize
-                  </a>
-                  <a href="../docs/avatars.html" class="list-group-item list-group-item-action">
-                    Avatars
-                  </a>
-                  <a href="../docs/badges.html" class="list-group-item list-group-item-action">
-                    Badges
-                  </a>
-                  <a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action">
-                    Breadcrumb
-                  </a>
-                  <a href="../docs/buttons.html" class="list-group-item list-group-item-action">
-                    Buttons
-                  </a>
-                  <a href="../docs/cards.html" class="list-group-item list-group-item-action">
-                    Cards
-                  </a>
-                  <a href="../docs/carousel.html" class="list-group-item list-group-item-action">
-                    Carousel
-                  </a>
-                  <a href="../docs/colors.html" class="list-group-item list-group-item-action">
-                    Colors
-                  </a>
-                  <a href="../docs/countup.html" class="list-group-item list-group-item-action">
-                    Countup
-                  </a>
-                  <a href="../docs/cursors.html" class="list-group-item list-group-item-action">
-                    Cursors
-                  </a>
-                  <a href="../docs/charts.html" class="list-group-item list-group-item-action active">
-                    Charts
-                  </a>
-                  <a href="../docs/divider.html" class="list-group-item list-group-item-action">
-                    Divider
-                  </a>
-                  <a href="../docs/empty.html" class="list-group-item list-group-item-action">
-                    Empty states
-                  </a>
-                  <a href="../docs/flags.html" class="list-group-item list-group-item-action">
-                    Flags
-                  </a>
-                  <a href="../docs/form-elements.html" class="list-group-item list-group-item-action">
-                    Form elements
-                  </a>
-                  <a href="../docs/form-helpers.html" class="list-group-item list-group-item-action">
-                    Form helpers
-                  </a>
-                  <a href="../docs/input-mask.html" class="list-group-item list-group-item-action">
-                    Form input mask
-                  </a>
-                  <a href="../docs/layout.html" class="list-group-item list-group-item-action">
-                    Layout
-                  </a>
-                  <a href="../docs/progress.html" class="list-group-item list-group-item-action">
-                    Progress
-                  </a>
-                  <a href="../docs/payments.html" class="list-group-item list-group-item-action">
-                    Payments
-                  </a>
-                  <a href="../docs/range-slider.html" class="list-group-item list-group-item-action">
-                    Range slider
-                  </a>
-                  <a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
-                    Ribbons
-                    <span class="badge bg-green ml-auto">New</span>
-                  </a>
-                  <a href="../docs/spinners.html" class="list-group-item list-group-item-action">
-                    Spinners
-                  </a>
-                  <a href="../docs/steps.html" class="list-group-item list-group-item-action">
-                    Steps
-                  </a>
-                  <a href="../docs/tables.html" class="list-group-item list-group-item-action">
-                    Tables
-                  </a>
-                  <a href="../docs/tabs.html" class="list-group-item list-group-item-action">
-                    Tabs
-                  </a>
-                  <a href="../docs/timelines.html" class="list-group-item list-group-item-action">
-                    Timelines
-                  </a>
-                  <a href="../docs/toasts.html" class="list-group-item list-group-item-action">
-                    Toasts
-                  </a>
-                  <a href="../docs/tooltips.html" class="list-group-item list-group-item-action">
-                    Tooltips
-                  </a>
-                  <a href="../docs/typography.html" class="list-group-item list-group-item-action">
-                    Typography
-                  </a>
+                <h5 class="subheader">On this page</h5>
+                <ul class="list-unstyled">
+                  <li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
+                </ul>
              </div>
            </div>
            <div class="col-lg-9">
-                <div class="card">
-                  <div class="card-body p-md-6 p-xl-7">
+              <div class="card card-lg">
+                <div class="card-body">
                  <div class="markdown">
-                      <h2 class="h1 mt-0 mb-3">Charts
-                      </h2>
-                      <h3 id="c3js-charts">c3.js charts</h3>
+                    <div class="d-flex">
+                      <h2 class="h1 mt-0 mb-3">Charts</h2>
+                    </div>
+                    <h2 id="default-markup">Default markup</h2>
                  </div>
                </div>
              </div>
            </div>
          </div>
-          </main>
        </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>
+    <script src="../dist/libs/jquery/dist/jquery.slim.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/Show More
+++ b/Show More
Author	SHA1	Message	Date
codecalm	14d0c00143	icons fixes	2020-04-20 23:12:55 +02:00
codecalm	007452a2a3	chart moved to chart page	2020-04-20 23:00:33 +02:00
codecalm	9c5888c708	Social referrals chart	2020-04-20 22:59:31 +02:00
codecalm	36190f30af	debug off	2020-04-20 22:03:36 +02:00
codecalm	0ef2d2f545	highlight editor fix	2020-04-20 22:00:09 +02:00
codecalm	6c0950638f	tabler icons demo	2020-04-20 21:56:47 +02:00
codecalm	cef66d41cb	svg icons increment build speed	2020-04-19 16:18:36 +02:00
codecalm	e00fcd4293	Merge remote-tracking branch 'origin/dev' into dev	2020-04-19 15:10:40 +02:00
codecalm	4d6a1f3912	`form-check-input` size fix #605	2020-04-19 15:09:27 +02:00
codecalm	f37630d1c9	`form-check-input` size fix	2020-04-19 15:08:30 +02:00
Paweł Kuna	e0d0cccbcf	Merge pull request #602 from WinterSilence/patch-7 Update package.json	2020-04-19 15:00:13 +02:00
Paweł Kuna	d092dad50d	Merge pull request #603 from WinterSilence/patch-8 Update tabler.js	2020-04-19 14:59:50 +02:00
codecalm	b6c87293a6	perfect line-height	2020-04-19 14:57:01 +02:00
codecalm	59fe775e0c	w3c test fixes	2020-04-19 14:48:53 +02:00
Anton	3a6e7cb2ff	Update tabler.js	2020-04-19 13:02:04 +03:00
Anton	cfe7bc83de	Update package.json Changes versions of packages to `"^x.x.x` for minor updates to fix bugs without problems with backwards compatibility.	2020-04-19 12:22:44 +03:00
codecalm	da384da5ad	dropdown id fix	2020-04-18 23:45:14 +02:00
codecalm	0bf2956c08	line-height fixes	2020-04-18 23:23:59 +02:00
codecalm	4dba599be6	pixel perfect form controls	2020-04-18 23:19:19 +02:00
codecalm	460f14c38a	card subtitle fix	2020-04-18 23:08:23 +02:00
codecalm	ea9e0086a0	typography fixes	2020-04-18 23:05:06 +02:00
Paweł Kuna	a42cf17dcb	Merge pull request #599 from tabler/dev-btn-white `btn-secondary` is now `btn-white` #566	2020-04-18 21:13:29 +02:00
Paweł Kuna	7c885ad90b	Merge pull request #600 from tabler/dev-vendors Optimized libs loading	2020-04-18 21:13:10 +02:00
codecalm	d186035562	docs fix	2020-04-18 21:07:50 +02:00
codecalm	61ece90772	docs libs loading	2020-04-18 21:06:40 +02:00
codecalm	b708ae2c22	optimize libs loading	2020-04-18 21:02:08 +02:00
codecalm	8a8ad8f6b8	icon fix	2020-04-18 20:19:49 +02:00
codecalm	fb0d07df23	dependencies update	2020-04-18 17:48:58 +02:00
codecalm	15a5c941fa	#595 fix	2020-04-18 17:04:43 +02:00
codecalm	2b43bce996	`btn-secondary` => `btn-white` #566	2020-04-18 16:59:31 +02:00
codecalm	423733a05e	fix #596	2020-04-18 16:10:08 +02:00
codecalm	c0a1910765	fix #586	2020-04-18 16:02:49 +02:00
codecalm	9e12536e69	navbar fix	2020-04-12 21:20:09 +02:00
codecalm	7fe9374b59	navbar iphone collapse fix	2020-04-12 21:13:22 +02:00
codecalm	d3f17b3c55	Bootstrap update	2020-04-12 20:44:30 +02:00
codecalm	5dabb88560	`min-height` responsive menu fix fix #594	2020-04-12 20:32:50 +02:00
codecalm	6fa067a0a2	`min-height` responsive menu fix fix #594	2020-04-12 20:05:55 +02:00
codecalm	5c9d127653	Release v1.0.0-alpha.6	2020-04-11 22:37:51 +02:00
codecalm	1a49c10adc	Release v1.0.0-alpha.6	2020-04-11 22:37:19 +02:00
codecalm	9c39df0736	Release v1.0.0-alpha.5	2020-04-11 22:35:27 +02:00
codecalm	4790de8f4b	dependencies update	2020-04-10 23:10:07 +02:00
codecalm	87fc60f2f1	navigatoin fixes	2020-04-10 22:53:58 +02:00
Paweł Kuna	542e3541c1	Merge pull request #584 from tabler/dev-nav New responsive navigation	2020-04-10 22:45:22 +02:00
codecalm	cbd7b121a7	font weight unification	2020-04-10 22:45:06 +02:00
codecalm	a78a0b0317	auto-open layout	2020-04-10 22:43:30 +02:00
codecalm	1fa65b3564	container fix	2020-04-10 22:38:04 +02:00
codecalm	141a619cd8	layout demos	2020-04-10 22:36:22 +02:00
codecalm	7f30e0b663	navbar fix	2020-04-10 22:00:29 +02:00
codecalm	36b3a0a55d	navbar demo, prepare to merge	2020-04-10 21:56:09 +02:00
codecalm	90c5e732b7	muted fix	2020-04-10 21:47:37 +02:00
codecalm	b24ac77a27	caret fixes, scrollbar fixes, mobile fixes	2020-04-08 23:28:05 +02:00
codecalm	2462eda6de	caret fixes, sample dropdown menu	2020-04-08 23:10:38 +02:00
codecalm	6c16ad313c	navbar colors refactoring	2020-04-08 22:55:26 +02:00
codecalm	6407103860	dark mode navbar fixes	2020-04-08 20:56:48 +02:00
codecalm	cfe3ff1b27	dark theme navbar	2020-04-08 20:52:35 +02:00
codecalm	8e52b0acc7	sidebar menu fixes	2020-04-07 23:23:43 +02:00
codecalm	c09fad1eb3	responsive navigation, sidebar, ui fixes	2020-04-07 23:06:59 +02:00
Paweł Kuna	bbfeefe61f	Merge pull request #577 from ollym/fix-selectize Fixed selectize wrap	2020-04-06 20:25:29 +02:00
codecalm	0f2288bc3f	navbar fixes	2020-04-05 20:11:41 +02:00
codecalm	36235f6e3e	navbar search fix	2020-04-05 20:01:17 +02:00
codecalm	d3faadbcee	transparent navbar	2020-04-05 19:56:44 +02:00
codecalm	1b0f32833b	navigations fixes	2020-04-05 15:20:37 +02:00
codecalm	1d1b9317c9	responsive navigation	2020-04-05 14:23:39 +02:00
codecalm	ef8a44159f	navigation demo	2020-04-05 13:38:36 +02:00
codecalm	58fd7a1dbb	responsive icon fixes	2020-04-05 13:06:51 +02:00
codecalm	6cad96c709	menu search responsive	2020-04-04 23:39:21 +02:00
codecalm	1f6a905f63	responsive menu	2020-04-04 22:33:18 +02:00
codecalm	8bdd990b43	responsive menu fix	2020-04-04 21:53:47 +02:00
codecalm	6d5d97e145	navbar fixes	2020-04-04 21:34:20 +02:00
codecalm	600a4c16e0	navbar forms	2020-04-04 20:40:38 +02:00
codecalm	72382a4b58	navbar expand	2020-04-04 19:42:20 +02:00
codecalm	2e254c258d	multiple navbars	2020-04-04 19:11:57 +02:00
codecalm	8b585ee1d1	responsive navbars	2020-04-04 17:07:33 +02:00
codecalm	71fbfdc8dc	env clean	2020-04-04 14:06:48 +02:00
codecalm	c7c278651c	icons disable on dev	2020-04-03 14:05:40 +02:00
Oliver Morgan	38901eb721	Fixed selectize wrap	2020-03-30 23:13:29 +02:00
codecalm	dbdb81acd9	input-group-prepend/append fix	2020-03-30 17:59:53 +02:00
codecalm	4a3a2fa7fe	#576 form-selectgroup-box -> form-selectgroup-label	2020-03-30 17:53:17 +02:00
codecalm	4dfcb1c03c	#576 margin fix	2020-03-30 17:50:34 +02:00
codecalm	03703fd7db	required form field fixes #575	2020-03-30 17:45:39 +02:00
codecalm	4534ea166a	user profile fix	2020-03-29 20:02:44 +02:00
codecalm	2a09f89662	dateficker fix fixes #525	2020-03-29 19:59:26 +02:00
codecalm	5a31e6ff0c	Merge remote-tracking branch 'origin/dev' into dev	2020-03-29 19:57:32 +02:00
codecalm	aa740f7f53	selectize fix #525	2020-03-29 19:57:27 +02:00
Paweł Kuna	b6ede3af34	Merge pull request #551 from WinterSilence/patch-5 Update _navbar.scss	2020-03-29 19:21:19 +02:00
codecalm	4ea8291d37	fixed #567	2020-03-29 19:20:36 +02:00
codecalm	e640941b4a	#258 fix	2020-03-29 19:11:08 +02:00
codecalm	f16de6f2eb	gemfile update	2020-03-29 19:06:30 +02:00
codecalm	44310ba94c	buttons color fixes	2020-03-28 18:01:16 +01:00
codecalm	360082fe2a	Gemfile.lock enable	2020-03-28 17:41:37 +01:00
codecalm	a5adf499cb	package-lock enable	2020-03-28 17:25:19 +01:00
codecalm	4100ea4d34	replace feather icons with tabler icons	2020-03-28 15:46:18 +01:00
codecalm	a3793fcf09	dependabot update_schedule change	2020-03-28 12:29:56 +01:00
Paweł Kuna	c449b0e1ba	Merge pull request #569 from Grelo4ka/README-Ruby-link-fix fix install Ruby link to close #568	2020-03-28 12:13:33 +01:00
codecalm	c850e86529	Merge branches 'dev' and 'dev-docs' of https://github.com/tabler/tabler into dev	2020-03-28 12:11:22 +01:00
codecalm	c02ed5ab87	dependencies update, new build	2020-03-28 12:07:34 +01:00
tbogusze	969941e7ee	fix install Ruby link	2020-03-27 22:13:03 +01:00
Martyna	ac322b8d8d	form helpers, input mask, tables, typography	2020-03-24 20:29:25 +01:00
Martyna	a58ba1ea25	flags, payments, timeline	2020-03-16 20:45:02 +01:00
codecalm	46761f072f	tables, docs, ui fixes	2020-03-15 17:28:03 +01:00
Anton	c848854a62	Update _navbar.scss Fix dropdown menus	2020-03-14 23:44:12 +03:00
Martyna	e784e10ec2	avatars, coutup, ribbons	2020-03-14 17:17:59 +01:00
codecalm	e50fe98c0e	Merge branches 'dev' and 'dev-sizing' of https://github.com/tabler/tabler into dev	2020-03-11 11:34:26 +01:00
Martyna	6626b721d1	cards, colors, progress	2020-03-10 20:58:10 +01:00
Martyna	21667508d3	form elements description	2020-03-10 17:51:05 +01:00
Paweł Kuna	89deeb041d	Update README.md	2020-03-09 20:23:49 +01:00
Paweł Kuna	f3e7d0e38c	Merge pull request #541 from paramshivaay/paramshivaay/gitpod-setup Add gitpod config	2020-03-09 20:23:08 +01:00
codecalm	a4884967af	dependencies update	2020-03-09 20:08:56 +01:00
codecalm	ae3831cddf	bootstrap upgrade	2020-03-09 19:59:45 +01:00
codecalm	745aa11330	Merge branches 'dev' and 'dev-docs' of https://github.com/tabler/tabler into dev	2020-03-09 19:58:40 +01:00
codecalm	93d01f0f76	avatars, lh fixes	2020-03-09 19:44:21 +01:00
Martyna	b2d3344b8b	tabs, spinners	2020-03-09 18:32:23 +01:00
Param Trivedi	cda8e8802c	Add gitpod config this commit adds support for Gitpod.io, a free automated dev environment that makes contributing and generally working on GitHub projects much easier. It allows anyone to start a ready-to-code dev environment for any branch, issue and pull request with a single click.	2020-03-08 19:04:09 +00:00
Martyna	f7ddb69df1	alerts, autosize, carousel, empty states, toasts	2020-03-07 14:12:43 +01:00
Martyna	d6b611d93e	form elements	2020-02-29 12:51:58 +01:00
codecalm	4d7f77e099	demo build improvements	2020-02-26 16:48:33 +01:00
codecalm	15d0138333	Merge remote-tracking branch 'origin/dev' into dev	2020-02-26 16:34:53 +01:00
codecalm	c6e2a8b78d	build demo	2020-02-26 16:34:37 +01:00
Dawid Harat	f5fc9fd5bc	range sliders fix	2020-02-25 20:29:02 +01:00
codecalm	a1d3ad7258	datepicker fix	2020-02-24 21:45:05 +01:00
codecalm	a71a3146b0	datepicker fix	2020-02-24 21:42:12 +01:00
codecalm	6d8d5a3096	dropdowns fixes	2020-02-24 21:26:48 +01:00
codecalm	2dd4d4b979	dropdown menu columns	2020-02-24 21:07:19 +01:00
codecalm	a3b172a6fc	dropdowns	2020-02-24 21:06:31 +01:00
codecalm	6057bad822	dropdown dark	2020-02-24 20:15:08 +01:00
codecalm	208bb11cb7	dropdowns	2020-02-24 20:11:46 +01:00
codecalm	9a31e32aa5	Merge remote-tracking branch 'origin/dev' into dev	2020-02-23 23:28:17 +01:00
codecalm	c002da507f	social timeline	2020-02-23 23:28:13 +01:00
Martyna	ade228d23a	steps	2020-02-23 19:28:13 +01:00
Paweł Kuna	b99d8173ea	Merge pull request #434 from tabler/dev-form-layout form-layouts added	2020-02-23 18:41:15 +01:00
codecalm	f81a1c6c47	form layouts	2020-02-23 18:40:53 +01:00
codecalm	c3a82d0d16	Merge branches 'dev' and 'dev-form-layout' of https://github.com/tabler/tabler into dev-form-layout Conflicts: pages/tmp3.html	2020-02-23 18:04:18 +01:00
codecalm	27a4babbea	Merge remote-tracking branch 'origin/dev-docs' into dev-docs	2020-02-23 17:58:02 +01:00
codecalm	959635ec6c	tables docs	2020-02-23 17:57:58 +01:00
Martyna	69ffddb301	Merge branch 'dev-docs' of https://github.com/tabler/tabler into dev-docs	2020-02-23 17:54:41 +01:00
Martyna	357d034c14	badges, breadcrumbs, dividers	2020-02-23 17:53:39 +01:00
codecalm	1dabe660fa	navbar fixes	2020-02-23 17:26:26 +01:00
codecalm	3a15877da6	#466 fix	2020-02-23 17:08:53 +01:00
codecalm	ad8a8b378b	#485 fix	2020-02-23 17:07:06 +01:00
codecalm	43e8415114	version 1.0.0-alpha.4	2020-02-22 13:06:55 +01:00
codecalm	ea4bba630e	change-version script fix	2020-02-22 12:52:03 +01:00
codecalm	9f820f6b73	version update	2020-02-22 12:38:47 +01:00
codecalm	9b552243f5	carousel, small fixes	2020-02-22 12:27:21 +01:00
codecalm	8dcc8f1aa9	Merge branches 'dev' and 'dev-docs' of https://github.com/tabler/tabler into dev	2020-02-21 15:07:41 +01:00
codecalm	ff5e69da10	#520 checkbox background chrome fix	2020-02-21 15:07:02 +01:00
codecalm	665c106b5f	mapbox small fixes	2020-02-21 14:38:13 +01:00
codecalm	c25b25936d	maps components, mapbox, small fixes	2020-02-21 13:33:54 +01:00
codecalm	c34031ffb3	maps components, mapbox, small fixes	2020-02-21 13:33:38 +01:00
Martyna	596a84d2ca	tooltips and cursors	2020-02-21 09:50:21 +01:00
Martyna	5194cfa44f	dropdowns	2020-02-20 22:19:49 +01:00
codecalm	1cacc9edb5	navbar top fixes	2020-02-19 22:21:09 +01:00
codecalm	2938d59dcb	bootstrap bundle minified fix	2020-02-19 22:00:19 +01:00
codecalm	3359dc63fe	dist new version	2020-02-19 21:57:24 +01:00
codecalm	d0cded0e98	bootstrap dropdowns fix, build fix	2020-02-19 21:57:01 +01:00
codecalm	e6f6368d56	navbar secondary fixes	2020-02-19 20:56:17 +01:00
codecalm	22aa83bf30	navbar notifications	2020-02-19 20:09:45 +01:00
codecalm	becee4bbac	modals docs, menu	2020-02-19 00:19:36 +01:00
codecalm	eaffa223fe	modals, avatar upload component	2020-02-19 00:16:20 +01:00
codecalm	1319d0c856	dark mode fixes	2020-02-18 23:00:56 +01:00
codecalm	2dabf473c3	dark mode fixes	2020-02-18 22:55:15 +01:00
codecalm	6af84f20af	modals	2020-02-18 22:35:20 +01:00
codecalm	484f064987	dependencies update	2020-02-18 20:21:47 +01:00
Martyna	40d979f602	buttons	2020-02-18 20:17:39 +01:00
codecalm	5b71b4d96a	homepage fixes	2020-02-18 19:40:29 +01:00
codecalm	97c63d186b	Merge remote-tracking branch 'origin/dev' into dev	2020-02-17 20:42:30 +01:00
codecalm	099b5247b3	dependencies update	2020-02-17 20:42:27 +01:00
Paweł Kuna	6bd6f7aef9	Update README.md	2020-02-17 16:16:07 +01:00
Paweł Kuna	e1d7c4dec3	Update README.md	2020-02-17 15:54:05 +01:00
codecalm	2e556bf9bc	navbar fixes	2020-02-16 22:04:13 +01:00
codecalm	cb3df94dc3	card padding fixes, sidenav fixes	2020-02-16 22:00:19 +01:00
codecalm	bbb2b27c66	collection hooks fixes	2020-02-16 21:51:07 +01:00
codecalm	1f88b128a6	form docs	2020-02-16 21:46:18 +01:00
codecalm	e898aa7d13	.md cleanup	2020-02-16 21:34:30 +01:00
codecalm	f8db48d702	Merge branches 'dev' and 'dev-docs' of https://github.com/tabler/tabler into dev-docs Conflicts: pages/_docs/badges.md	2020-02-16 21:32:05 +01:00
codecalm	0d36f29859	capture fix	2020-02-16 21:31:16 +01:00
codecalm	0746172c7d	docs fixes	2020-02-16 21:30:44 +01:00
Paweł Kuna	5544589c7f	Merge pull request #479 from tabler/dev-badges added bagde-avatar badge-tag and changed color of the dafault badge	2020-02-16 20:54:15 +01:00
Paweł Kuna	0bf0378c24	Merge branch 'dev' into dev-badges	2020-02-16 20:51:43 +01:00
codecalm	4289a763b3	reformat code	2020-02-16 20:45:19 +01:00
codecalm	812538ad45	dropdowns	2020-02-16 20:36:29 +01:00
codecalm	9f10668e7b	Merge branches 'dev' and 'dev-docs' of https://github.com/tabler/tabler into dev-docs	2020-02-16 19:17:16 +01:00
codecalm	7bb5ed4ad5	remove menu, remove unused files	2020-02-16 19:13:37 +01:00
codecalm	51c0687a1a	percy visual tests	2020-02-16 19:10:06 +01:00
codecalm	02d9dd2ae4	bootstrap upgrade	2020-02-16 14:28:52 +01:00
codecalm	ddebdae245	docs examples	2020-02-16 14:17:43 +01:00
codecalm	cde7a6502b	markdown fixes	2020-02-13 23:11:58 +01:00
codecalm	0cd61a8c7a	cards, buttons	2020-02-13 23:07:17 +01:00
codecalm	56432a51aa	button fixes	2020-02-13 22:38:45 +01:00
codecalm	921c0a8bbe	button fixes	2020-02-13 22:34:52 +01:00
codecalm	f17824170c	index fixes	2020-02-13 22:10:53 +01:00
codecalm	d41457f0b5	remove examples plugin, new examples	2020-02-13 22:09:47 +01:00
codecalm	1969d44512	Merge branches 'dev' and 'dev-docs' of https://github.com/tabler/tabler into dev-docs	2020-02-13 16:10:38 +01:00
Martyna	5e5add82e4	introduction update	2020-02-12 22:23:40 +01:00
codecalm	efdcfe341b	small fixes	2020-02-12 21:36:11 +01:00
Martyna	76fc2ffb8d	Merge branch 'dev-docs' of https://github.com/tabler/tabler into dev-docs	2020-02-10 21:52:22 +01:00
codecalm	589114f7da	empty page	2020-02-09 16:58:09 +01:00
codecalm	3e4d07241a	navbar primary fix	2020-02-09 16:53:09 +01:00
codecalm	738eff385d	tabler customize	2020-02-09 16:49:37 +01:00
codecalm	f13ac7db49	pricing cards	2020-02-08 23:18:39 +01:00
codecalm	09673052b0	readme, Tabler sponsors	2020-02-08 20:26:31 +01:00
codecalm	29072cf419	readme, Tabler sponsors	2020-02-08 20:25:38 +01:00
codecalm	5e0a66281a	readme, Tabler sponsors	2020-02-08 20:23:23 +01:00
codecalm	019037c65a	homepage fixes	2020-02-08 00:04:46 +01:00
codecalm	5c738dc5a9	homepage fixes	2020-02-07 23:42:27 +01:00
codecalm	077ffaeb70	centered container	2020-02-07 23:12:19 +01:00
Paweł Kuna	6414d2468a	Merge pull request #415 from tabler/dev-scss-fixes Removed outline from toasts' closing btn and fixed alert btn	2020-02-07 22:53:42 +01:00
Paweł Kuna	9e187f2a16	Merge branch 'dev' into dev-scss-fixes	2020-02-07 22:52:32 +01:00
Paweł Kuna	a9fc22e0c9	Merge pull request #414 from tabler/dev-footer Copied footer from the old version and added it to grid layout	2020-02-07 22:42:51 +01:00
codecalm	0acfeeb3a1	css fix	2020-02-07 22:37:31 +01:00
codecalm	896355c29e	footer page fixes	2020-02-07 22:35:01 +01:00
codecalm	897c4f5e26	footer page fixes	2020-02-07 22:31:44 +01:00
codecalm	a7f4f054fb	Merge branches 'dev' and 'dev-footer' of https://github.com/tabler/tabler into dev-footer Conflicts: pages/_layouts/default.html scss/_dark.scss scss/_variables.scss scss/layout/_layout.scss scss/tabler.scss	2020-02-07 21:00:51 +01:00
codecalm	78de3c5903	better spacing	2020-02-07 20:51:56 +01:00
codecalm	6bd04b7bd8	pricing cards fixes	2020-02-07 20:37:54 +01:00
Paweł Kuna	f0491a91c4	Merge pull request #482 from tabler/dev-pricing-cards Added pricing cards	2020-02-07 20:35:19 +01:00
Paweł Kuna	e42578ba76	Merge branch 'dev' into dev-pricing-cards	2020-02-07 20:35:05 +01:00
codecalm	c50a4a42e8	row misspell	2020-02-07 20:27:47 +01:00
codecalm	0200ab10c4	homepage misspeling	2020-02-07 20:25:49 +01:00
codecalm	a997469b6f	bootsrrap update	2020-02-07 20:11:36 +01:00
codecalm	c7d7aea9ba	docs fixes	2020-02-05 20:50:02 +01:00
codecalm	a76387f94d	Merge branches 'dev' and 'dev-docs' of https://github.com/tabler/tabler into dev-docs	2020-02-05 16:21:13 +01:00
codecalm	4096d77c6b	package fix	2020-02-05 16:20:23 +01:00
Martyna	704ae33cb2	test	2020-02-05 15:57:26 +01:00
Paweł Kuna	bcee47c5fa	Update breadcrumb.md	2020-02-05 15:55:55 +01:00
Martyna	229ee64345	test	2020-02-05 15:54:58 +01:00
Paweł Kuna	d8d3929b7f	Update breadcrumb.md	2020-02-05 15:53:26 +01:00
Martyna	359bd2b651	test	2020-02-05 15:52:49 +01:00
Martyna	d4e5f8293e	tste	2020-02-05 15:50:16 +01:00
Paweł Kuna	c60b884bdf	Update alerts.md	2020-02-05 15:49:45 +01:00
Martyna	06e7820363	test 2	2020-02-05 15:48:36 +01:00
Martyna	fcd9b4bb47	Merge branch 'dev-docs' of https://github.com/tabler/tabler into dev-docs	2020-02-05 15:47:07 +01:00
Martyna	dc295228cc	test	2020-02-05 15:45:56 +01:00
Paweł Kuna	267a4aaa22	Update index.md	2020-02-05 15:28:11 +01:00
Martyna	cac904de09	test	2020-02-05 15:24:59 +01:00
Paweł Kuna	797b0f3f88	Update index.md	2020-02-05 15:21:19 +01:00
codecalm	403b1d9132	version v1.0.0-alpha.3	2020-02-04 09:09:28 +01:00
memorte03	66332cbb51	added bagde-avatar badge-tag and changed color of the dafault badge	2020-02-03 20:22:41 +01:00
Dawid Harat	a23031fb33	form-layouts added	2019-12-14 15:14:23 +01:00
memorte03	746700b1df	Added pricing cards	2019-12-08 21:35:08 +01:00
memorte03	a71b88e72b	Copied footer from the old version and added it to grid layout	2019-12-08 12:38:14 +01:00
memorte03	88c7696c6f	Removed outline from toasts' closing btn and fixed alert btn	2019-12-07 21:24:17 +01:00