Release 1.0.0-alpha.9

# Conflicts:
#	src/pages/_includes/layout/homepage.html

.bundlewatch.config.json

@@ -0,0 +1,36 @@
+{
+  "files": [
+    {
+      "path": "./dist/css/tabler.css",
+      "maxSize": "55 kB"
+    },
+    {
+      "path": "./dist/css/tabler.min.css",
+      "maxSize": "45 kB"
+    },
+    {
+      "path": "./dist/css/tabler-flags.css",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "./dist/css/tabler-flags.min.css",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "./dist/css/tabler-payments.css",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "./dist/css/tabler-payments.min.css",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "./dist/js/tabler.js",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "./dist/js/tabler.min.js",
+      "maxSize": "1.5 kB"
+    }
+  ]
+}

.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:

.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
 

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,30 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: "[BUG] "
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+
+A clear and concise description of what the bug is.
+
+**Device**
+
+ - Browser [e.g. Chrome ver.22, Safari ver.10]
+ - OS: [e.g. Windows 10]
+ - Screen size [e.g. 800x600]
+
+**To reproduce**
+
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '...'
+3. Scroll down to '...'
+4. See error
+
+**Screenshots**
+
+If applicable, add screenshots to help explain this problem.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,17 @@
+---
+name: Feature request
+about: Suggest an idea for Tabler
+title: "[FEATURE] "
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Example: I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.

.gitignore

@@ -1,16 +1,16 @@
 node_modules/
-/package-lock.json
 .idea/
 /db.json
 .jekyll-metadata
 .jekyll-cache
 /tmp/
+/.tmp/
 /tmp-dist/
 /yarn.lock
 .DS_Store
-/Gemfile.lock
 /_site/
 /.cache/
+.sass-cache/
 
 .vscode/
 
@@ -21,3 +21,5 @@ node_modules/
 /svg-tmp/
 /components/
 /percy.sh
+/Gemfile.lock
+/package-lock.json

.gitpod.yml

@@ -0,0 +1,3 @@
+tasks:
+  - init: npm install && npm run build
+    command: npm run start

Gemfile

@@ -1,6 +1,6 @@
 source "https://rubygems.org"
 
-gem "jekyll"
+gem "jekyll", "4.1.1"
 
 group :jekyll_plugins do
 	gem 'jekyll-toc'
@@ -11,3 +11,5 @@ group :jekyll_plugins do
 end
 
 gem 'wdm', '>= 0.1.1' if Gem.win_platform?
+
+

README.md

@@ -2,17 +2,18 @@
 
 A premium and open source dashboard template with a responsive and high-quality UI.
 
-<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>
+<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>
 
-![Tabler preview](/static/tabler-preview.png?raw=true)
+![Tabler preview](/src/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)
+<a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"></a> 
+<a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"></a> 
+<a href="https://www.npmjs.com/package/tabler"><img src="https://img.shields.io/npm/dt/tabler.svg" alt="Total Downloads"></a> 
+<a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg" alt="License"></a> 
+<a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler.svg" alt="Latest Release"></a>
 
 
 ## Features
@@ -54,7 +55,7 @@ To use our build system and run our documentation locally, you'll need a copy of
 
 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**:

_config.yml

@@ -1,17 +1,25 @@
-source: pages
+source: src/pages
 destination: tmp
 
-version: 1.0.0-alpha.4
+keep_files:
+  - css
+  - js
+  - img
+  - dist
+  - static
+
 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
+homepage: https://tabler.io
+github-url: https://github.com/tabler/tabler
+changelog-url: https://github.com/tabler/tabler/releases
+sponsor-url: https://github.com/sponsors/codecalm
 
 mapbox_key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
 
 debug: false
 
-dark-theme: false
+layout-dark: false
 
 plugins:
   - jekyll-random
@@ -23,15 +31,10 @@ plugins:
 tabler-plugins:
   - tabler-flags
   - tabler-payments
-  - tabler-buttons
 
 exclude:
   - .jekyll-cache
-
-keep_files:
-  - css/ui-kit.css
-  - css/dark.css
-  - css/rtl.css
+  - redirects.json
 
 markdown: kramdown
 kramdown:
@@ -50,10 +53,6 @@ toc:
 collections:
   docs:
     output: true
-  changelog:
-    output: false
-  components:
-    output: true
 
 defaults:
   - scope:
@@ -71,11 +70,6 @@ defaults:
     values:
       layout: docs
       toc: true
-  - scope:
-      type: "components"
-    values:
-      layout: component
-
 
 colors:
   blue:
@@ -114,9 +108,6 @@ colors:
   cyan:
     hex: '#17a2b8'
     title: Cyan
-  gray:
-    hex: '#868e96'
-    title: Gray
 
 colors-extra:
   white:
@@ -125,16 +116,19 @@ colors-extra:
   dark:
     hex: '#303645'
     title: Dark
+  gray:
+    hex: '#868e96'
+    title: Gray
 
 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:
@@ -161,9 +155,6 @@ button-variants:
   dark:
     class: dark
     title: Dark
-  link:
-    class: link
-    title: Link
 
 button-states:
   - class:
@@ -175,47 +166,47 @@ button-states:
 
 socials:
   facebook:
-    icon: brand/facebook
+    icon: brand-facebook
     title: Facebook
   twitter:
-    icon: brand/twitter
+    icon: brand-twitter
     title: Twitter
   google:
-    icon: brand/google
+    icon: brand-google
     title: Google
   youtube:
-    icon: brand/youtube
+    icon: brand-youtube
     title: Youtube
   vimeo:
-    icon: brand/vimeo
+    icon: brand-vimeo
     title: Vimeo
   dribbble:
-    icon: brand/dribbble
+    icon: brand-dribbble
     title: Dribbble
   github:
-    icon: brand/github
+    icon: brand-github
     title: Github
   instagram:
-    icon: brand/instagram
+    icon: brand-instagram
     title: Instagram
   pinterest:
-    icon: brand/pinterest
+    icon: brand-pinterest
     title: Pinterest
   vk:
-    icon: brand/vk
+    icon: brand-vk
     title: VK
   rss:
-    icon: brand/rss
+    icon: rss
     title: RSS
   flickr:
-    icon: brand/flickr
+    icon: brand-flickr
     title: Flickr
   bitbucket:
-    icon: brand/bitbucket
+    icon: brand-bitbucket
     title: Bitbucker
   tabler:
-    icon: brand/tabler
+    icon: brand-tabler
     title: Tabler
 
-months_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-months_long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+months-short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+months-long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

build/banner.js

@@ -1,14 +0,0 @@
-'use strict';
-
-const pkg = require('../package.json'),
-	year = new Date().getFullYear();
-
-function getBanner(pluginFilename) {
-	return `/*!
-  * Tabler${pluginFilename ? ` ${pluginFilename}` : ''} v${pkg.version} (${pkg.homepage})
-  * Copyright 2018-${year} ${pkg.author}
-  * Licensed under ${pkg.license} (https://github.com/tabler/tabler/blob/master/LICENSE)
-  */`;
-}
-
-module.exports = getBanner;

build/browsersync.js

@@ -1,30 +0,0 @@
-const bs = require('browser-sync').create();
-
-bs.init({
-	watch: true,
-	server: {
-		routes: {
-			'/': 'tmp',
-			'/dist': 'tmp-dist',
-			'/libs': 'static/libs',
-			'/tmp-dist/img': 'img',
-			'/static': 'static',
-			'/node_modules': 'node_modules',
-		},
-	},
-	files: ['tmp/**/*', 'tmp-dist/css/*.css', 'tmp-dist/js/*.js', 'tmp-dist/img/*.svg'],
-	watchOptions: {
-		ignoreInitial: true,
-	},
-	reloadDelay: 1000,
-	notify: false,
-	open: false,
-	snippetOptions: {
-		rule: {
-			match: /<\/head>/i,
-			fn: function (snippet, match) {
-				return snippet + match;
-			}
-		}
-	}
-});

build/capture-components.sh

@@ -1,11 +0,0 @@
-rm -rf ../static/img/components/*
-
-for file in ../pages/_components/*.html; do
-  file="$(basename -- $file)"
-  file="${file%.html}"
-  url="http://localhost:3001/components/$file.html"
-  echo $url
-
-  capture-website $url --element="#component-wrapper" --scale-factor=2 >../static/img/components/$file.png
-  convert ../static/img/components/$file.png -gravity Center -crop 1648x824-0-0! -background "#F5F7FB" -flatten +repage -resize 1280x640 ../static/img/components/$file.png
-done

build/change-version.js

@@ -1,110 +0,0 @@
-#!/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));

build/copy-libs.js

@@ -1,35 +0,0 @@
-if (!Array.prototype.flat) {
-	Object.defineProperty(Array.prototype, 'flat', {
-		value: function (depth = 1) {
-			return this.reduce(function (flat, toFlatten) {
-				return flat.concat((Array.isArray(toFlatten) && (depth > 1)) ? toFlatten.flat(depth - 1) : toFlatten);
-			}, []);
-		}
-	});
-}
-
-
-const all_libs = require('../pages/_data/libs'),
-	path = require('path'),
-	{ exec } = require('child_process');
-
-let files = [];
-
-Object.keys(all_libs.js).forEach(function (lib) {
-	files.push(Array.isArray(all_libs.js[lib]) ? all_libs.js[lib] : [all_libs.js[lib]]);
-});
-
-Object.keys(all_libs.css).forEach(function (lib) {
-	files.push(Array.isArray(all_libs.css[lib]) ? all_libs.css[lib] : [all_libs.css[lib]]);
-});
-
-files = files.flat();
-
-files.forEach(function (file) {
-	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)
-	}
-});

build/postcss.config.js

@@ -1,15 +0,0 @@
-'use strict';
-
-module.exports = ctx => ({
-	map: {
-		inline: false,
-		annotation: true,
-		sourcesContent: true
-	},
-	plugins: {
-		autoprefixer: {
-			cascade: false,
-			grid: "autoplace"
-		}
-	}
-});

build/rollup.config.js

@@ -1,44 +0,0 @@
-'use strict';
-
-const BUNDLE = process.env.BUNDLE === 'true';
-const dir = BUNDLE ? 'dist' : 'tmp-dist';
-
-import path from 'path';
-import babel from 'rollup-plugin-babel';
-import resolve from 'rollup-plugin-node-resolve';
-import minify from 'rollup-plugin-babel-minify';
-import commonjs from 'rollup-plugin-commonjs';
-
-const fileDest = 'tabler',
-	banner = require('./banner');
-
-let plugins = [
-	resolve(),
-	commonjs()
-];
-
-if (BUNDLE) {
-	plugins = plugins.concat([
-		babel({
-			exclude: 'node_modules/**'
-		}),
-		minify({
-			comments: false
-		})
-	]);
-}
-
-
-module.exports = {
-	context: "window",
-	input: {
-		tabler: path.resolve(__dirname, '../js/tabler.js'),
-	},
-	output: {
-		banner,
-		dir: path.resolve(__dirname, `../${dir}/js/`),
-		entryFileNames: BUNDLE ? '[name].min.js' : '[name].js',
-		format: 'cjs'
-	},
-	plugins,
-};

build/scss-compile.js

@@ -1,43 +0,0 @@
-const BUNDLE = process.env.BUNDLE === 'true';
-
-const path = require('path'),
-	glob = require("glob"),
-	fs = require("fs"),
-	sass = require("node-sass"),
-	packageImporter = require('node-sass-package-importer');
-
-const dir = BUNDLE ? 'dist' : 'tmp-dist';
-
-glob("scss/{tabler*,demo}.scss", {}, function (er, files) {
-	files.forEach(function (file) {
-		var basename = path.basename(file, '.scss');
-
-		sass.render(
-			{
-				file: file,
-				outFile: `${dir}/css/${basename}.css`,
-				sourceMap: true,
-				sourceMapContents: true,
-				precision: 7,
-				importer: packageImporter()
-			},
-			(error, result) => {
-				if (!error) {
-					fs.writeFile(`${dir}/css/${basename}.css`, result.css, error => {
-						if (error) {
-							console.log(error);
-						}
-					});
-
-					fs.writeFile(`${dir}/css/${basename}.css.map`, result.map, error => {
-						if (error) {
-							console.log(error);
-						}
-					});
-				} else {
-					throw error;
-				}
-			}
-		);
-	});
-});

build/unused-files.js

@@ -1,26 +0,0 @@
-#!/usr/bin/env node
-
-const glob = require("glob"),
-	fs = require("fs");
-
-let foundFiles = [];
-
-glob.sync("pages/**/*.{html,md}").forEach(function (file) {
-	let fileContent = fs.readFileSync(file);
-
-	fileContent.toString().replace(/\{% include(_cached)? ([a-z0-9\/_-]+\.html)/g, function (f, c, filename) {
-		filename = 'pages/_includes/' + filename;
-
-		if (!foundFiles.includes(filename)) {
-			foundFiles.push(filename);
-		}
-	});
-});
-
-let includeFiles = glob.sync("pages/_includes/**/*.html");
-
-includeFiles.forEach(function (file) {
-	if (!foundFiles.includes(file)) {
-		console.log('file', file);
-	}
-});

demo/401.html

@@ -1,79 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
-* @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"/>
-    <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"/>
-    <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"/>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1582373134" 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?1582373134" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css?1582373134" 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">
-      <div class="container-tight py-6">
-        <div class="empty">
-          <div class="empty-icon">
-            <div class="display-4">401</div>
-          </div>
-          <p class="empty-title h3">Oops… You just found an error page</p>
-          <p class="empty-subtitle text-muted">
-            We are sorry but you are not authorized to access this page
-          </p>
-          <div class="empty-action">
-            <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-              Take me home
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1582373134"></script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

demo/403.html

@@ -1,79 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
-* @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"/>
-    <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"/>
-    <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"/>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1582373134" 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?1582373134" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css?1582373134" 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">
-      <div class="container-tight py-6">
-        <div class="empty">
-          <div class="empty-icon">
-            <div class="display-4">403</div>
-          </div>
-          <p class="empty-title h3">Oops… You just found an error page</p>
-          <p class="empty-subtitle text-muted">
-            We are sorry but you do not have permission to access this page
-          </p>
-          <div class="empty-action">
-            <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-              Take me home
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1582373134"></script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

demo/500.html

@@ -1,79 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
-* @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"/>
-    <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"/>
-    <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"/>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1582373134" 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?1582373134" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css?1582373134" 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">
-      <div class="container-tight py-6">
-        <div class="empty">
-          <div class="empty-icon">
-            <div class="display-4">500</div>
-          </div>
-          <p class="empty-title h3">Oops… You just found an error page</p>
-          <p class="empty-subtitle text-muted">
-            We are sorry but our server encountered an internal error
-          </p>
-          <div class="empty-action">
-            <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-              Take me home
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1582373134"></script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

demo/503.html

@@ -1,79 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
-* @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"/>
-    <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"/>
-    <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"/>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1582373134" 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?1582373134" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css?1582373134" 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">
-      <div class="container-tight py-6">
-        <div class="empty">
-          <div class="empty-icon">
-            <div class="display-4">503</div>
-          </div>
-          <p class="empty-title h3">Oops… You just found an error page</p>
-          <p class="empty-subtitle text-muted">
-            We are sorry but our service is currently not available
-          </p>
-          <div class="empty-action">
-            <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-              Take me home
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1582373134"></script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

demo/blog.html

@@ -1,980 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
-* @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"/>
-    <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"/>
-    <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"/>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1582373134" 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?1582373134" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css?1582373134" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <div class="navbar-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
-            <ul class="navbar-nav">
-              <li class="nav-item">
-                <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Home</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Base</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
-                  <li >
-                    <a class="dropdown-item" href="./empty.html" >
-                      Empty page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./blank.html" >
-                      Blank page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" 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="./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 active">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Extra</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
-                  <li >
-                    <a class="dropdown-item" href="./invoice.html" >
-                      Invoice
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item active" href="./blog.html" >
-                      Blog cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./snippets.html" >
-                      Snippets
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./search-results.html" >
-                      Search results
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./pricing.html" >
-                      Pricing cards
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Docs</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="./docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/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/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
-            </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <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>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
-            </div>
-          </div>
-        </div>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex">
-            <div class="input-icon w-100">
-              <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 form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <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>
-            </li>
-            <li class="nav-item dropdown pl-2">
-              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
-      <div class="content">
-        <div class="container">
-          <!-- Page title -->
-          <div class="page-header">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Blog
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row row-deck">
-            <div class="col-sm-6 col-xl-4">
-              <div class="card d-flex flex-column">
-                <a href="#">
-                  <img class="card-img-top" src="./static/photos//9f36332564ca271d.jpg" alt="And this isn&#39;t my nose. This is a false one.">
-                </a>
-                <div class="card-body d-flex flex-column">
-                  <h3 class="card-title"><a href="#">And this isn't my nose. This is a false one.</a></h3>
-                  <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
-                  <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./static/avatars/002m.jpg)"></span>
-                    <div class="ml-3">
-                      <a href="./profile.html" class="text-body">Dunn Slane</a>
-                      <small class="d-block text-muted">3 days ago</small>
-                    </div>
-                    <div class="ml-auto">
-                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-xl-4">
-              <div class="card d-flex flex-column">
-                <a href="#">
-                  <img class="card-img-top" src="./static/photos//35b88fc04a518c1b.jpg" alt="Well, I didn&#39;t vote for you.">
-                </a>
-                <div class="card-body d-flex flex-column">
-                  <h3 class="card-title"><a href="#">Well, I didn't vote for you.</a></h3>
-                  <div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
-                  <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./static/avatars/003m.jpg)"></span>
-                    <div class="ml-3">
-                      <a href="./profile.html" class="text-body">Emmy Levet</a>
-                      <small class="d-block text-muted">3 days ago</small>
-                    </div>
-                    <div class="ml-auto">
-                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-xl-4">
-              <div class="card d-flex flex-column">
-                <a href="#">
-                  <img class="card-img-top" src="./static/photos//36e273986ed577b8.jpg" alt="How do you know she is a witch?">
-                </a>
-                <div class="card-body d-flex flex-column">
-                  <h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
-                  <div class="text-muted">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
-                  <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./static/avatars/000f.jpg)"></span>
-                    <div class="ml-3">
-                      <a href="./profile.html" class="text-body">Maryjo Lebarree</a>
-                      <small class="d-block text-muted">3 days ago</small>
-                    </div>
-                    <div class="ml-auto">
-                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-xl-4">
-              <div class="card d-flex flex-column">
-                <div class="card-body d-flex flex-column">
-                  <h3 class="card-title"><a href="#">Weaseling out of things is important to learn.</a></h3>
-                  <div class="text-muted">Please do not offer my god a peanut. That's why I love elementary school, Edna. The children beli...</div>
-                  <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                    <div class="ml-3">
-                      <a href="./profile.html" class="text-body">Perren Keemar</a>
-                      <small class="d-block text-muted">3 days ago</small>
-                    </div>
-                    <div class="ml-auto">
-                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-xl-4">
-              <div class="card d-flex flex-column">
-                <div class="card-body d-flex flex-column">
-                  <h3 class="card-title"><a href="#">You don't like your job, you don't strike.</a></h3>
-                  <div class="text-muted">But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've ...</div>
-                  <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./static/avatars/007m.jpg)"></span>
-                    <div class="ml-3">
-                      <a href="./profile.html" class="text-body">Sunny Airey</a>
-                      <small class="d-block text-muted">3 days ago</small>
-                    </div>
-                    <div class="ml-auto">
-                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-xl-4">
-              <div class="card d-flex flex-column">
-                <div class="card-body d-flex flex-column">
-                  <h3 class="card-title"><a href="#">I hope I didn't brain my damage.</a></h3>
-                  <div class="text-muted">I don't like being outdoors, Smithers. For one thing, there's too many fat children. Oh, loneline...</div>
-                  <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md">SA</span>
-                    <div class="ml-3">
-                      <a href="./profile.html" class="text-body">Geoffry Flaunders</a>
-                      <small class="d-block text-muted">3 days ago</small>
-                    </div>
-                    <div class="ml-auto">
-                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6">
-              <div class="card d-flex flex-column">
-                <div class="row row-0 flex-fill">
-                  <div class="col-md-3">
-                    <a href="#">
-                      <img src="./static/photos//9f36332564ca271d.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-                    </a>
-                  </div>
-                  <div class="col">
-                    <div class="card-body">
-                      <h3 class="card-title"><a href="#">And this isn't my nose. This is a false one.</a></h3>
-                      <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
-                      <div class="d-flex align-items-center pt-5 mt-auto">
-                        <span class="avatar avatar-md" style="background-image: url(./static/avatars/002m.jpg)"></span>
-                        <div class="ml-3">
-                          <a href="./profile.html" class="text-body">Dunn Slane</a>
-                          <small class="d-block text-muted">3 days ago</small>
-                        </div>
-                        <div class="ml-auto">
-                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                          </a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6">
-              <div class="card d-flex flex-column">
-                <div class="row row-0 flex-fill">
-                  <div class="col-md-3">
-                    <a href="#">
-                      <img src="./static/photos//35b88fc04a518c1b.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-                    </a>
-                  </div>
-                  <div class="col">
-                    <div class="card-body">
-                      <h3 class="card-title"><a href="#">Well, I didn't vote for you.</a></h3>
-                      <div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
-                      <div class="d-flex align-items-center pt-5 mt-auto">
-                        <span class="avatar avatar-md" style="background-image: url(./static/avatars/003m.jpg)"></span>
-                        <div class="ml-3">
-                          <a href="./profile.html" class="text-body">Emmy Levet</a>
-                          <small class="d-block text-muted">3 days ago</small>
-                        </div>
-                        <div class="ml-auto">
-                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                          </a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6">
-              <div class="card d-flex flex-column">
-                <div class="row row-0 flex-fill">
-                  <div class="col-md-3">
-                    <a href="#">
-                      <img src="./static/photos//802a16cdf5ce3551.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-                    </a>
-                  </div>
-                  <div class="col">
-                    <div class="card-body">
-                      <h3 class="card-title"><a href="#">Weaseling out of things is important to learn.</a></h3>
-                      <div class="text-muted">Please do not offer my god a peanut. That's why I love elementary school, Edna. The children believe anything you tell them. Brace yourselves gentlemen. According to the gas chromatograph, the secr...</div>
-                      <div class="d-flex align-items-center pt-5 mt-auto">
-                        <span class="avatar avatar-md" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                        <div class="ml-3">
-                          <a href="./profile.html" class="text-body">Perren Keemar</a>
-                          <small class="d-block text-muted">3 days ago</small>
-                        </div>
-                        <div class="ml-auto">
-                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                          </a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6">
-              <div class="card d-flex flex-column">
-                <div class="row row-0 flex-fill">
-                  <div class="col-md-3">
-                    <a href="#">
-                      <img src="./static/photos//0986f97be719fb9a.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-                    </a>
-                  </div>
-                  <div class="col">
-                    <div class="card-body">
-                      <h3 class="card-title"><a href="#">You don't like your job, you don't strike.</a></h3>
-                      <div class="text-muted">But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've wasted my life. Son, when you participate in sporting events, it's not whether you win or lose: it's...</div>
-                      <div class="d-flex align-items-center pt-5 mt-auto">
-                        <span class="avatar avatar-md" style="background-image: url(./static/avatars/007m.jpg)"></span>
-                        <div class="ml-3">
-                          <a href="./profile.html" class="text-body">Sunny Airey</a>
-                          <small class="d-block text-muted">3 days ago</small>
-                        </div>
-                        <div class="ml-auto">
-                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
-                          </a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </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-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" 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="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" 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="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" 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 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1582373134"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

demo/cards-masonry.html

@@ -0,0 +1,842 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.9
+* @link https://tabler.io
+* Copyright 2018-2020 The Tabler Authors
+* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Cards Masonry - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <header class="navbar navbar-expand-md navbar-light">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
+            <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+          </a>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item dropdown d-none d-md-flex mr-3">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                <span class="badge bg-red"></span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
+                <span class="avatar avatar-sm" 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">
+                <a href="#" class="dropdown-item">Set status</a>
+                <a href="#" class="dropdown-item">Profile & account</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" class="dropdown-item">Settings</a>
+                <a href="#" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="./index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item active dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      User Interface
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
+                    <li >
+                      <a class="dropdown-item" href="./empty.html" >
+                        Empty page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./blank.html" >
+                        Blank page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item active" href="./cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./dropdowns.html" >
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./icons.html" >
+                        Icons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./modals.html" >
+                        Modals
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./maps.html" >
+                        Maps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./maps-vector.html" >
+                        Vector maps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./navigation.html" >
+                        Navigation
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./tables.html" >
+                        Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs-index.html" >
+                        Docs index
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./error-404.html" class="dropdown-item">404 page</a>
+                        <a href="./error-500.html" class="dropdown-item">500 page</a>
+                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./invoice.html" >
+                        Invoice
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./blog.html" >
+                        Blog cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./search-results.html" >
+                        Search results
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./pricing.html" >
+                        Pricing cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./layout-horizontal.html" >
+                        Horizontal
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-vertical.html" >
+                        Vertical
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-vertical-right.html" >
+                        Right vertical
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-condensed.html" >
+                        Condensed
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-condensed-dark.html" >
+                        Condensed dark
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-combo.html" >
+                        Combined
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-dark.html" >
+                        Navbar dark
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-dark.html" >
+                        Dark mode
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-fluid.html" >
+                        Fluid
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-fluid-vertical.html" >
+                        Fluid vertical
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Docs
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
+                    <li >
+                      <a class="dropdown-item" href="./docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/dropdowns.html" >
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/divider.html" >
+                        Divider
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/empty.html" >
+                        Empty states
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/flags.html" >
+                        Flags
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/form-elements.html" >
+                        Form elements
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/form-helpers.html" >
+                        Form helpers
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/input-mask.html" >
+                        Form input mask
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/modals.html" >
+                        Modals
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/progress.html" >
+                        Progress
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/payments.html" >
+                        Payments
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/ribbons.html" >
+                        Ribbons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/spinners.html" >
+                        Spinners
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/steps.html" >
+                        Steps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/tables.html" >
+                        Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/timelines.html" >
+                        Timelines
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/toasts.html" >
+                        Toasts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/tooltips.html" >
+                        Tooltips
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Cards Masonry
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row row-cards" data-masonry='{"percentPosition": true }'>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <p>This is some text within a card body.</p>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <h3 class="card-title">Card with bottom image</h3>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+                <div class="card-img-bottom img-responsive img-responsive-16by9" style="background-image: url(./static/photos/56614e12b2a7bd68.jpg)"></div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+                <!-- Card footer -->
+                <div class="card-footer">
+                  <div class="row align-items-center">
+                    <div class="col-auto">
+                      <a href="#">More information</a>
+                    </div>
+                    <div class="col-auto ml-auto">
+                      <label class="form-check form-switch m-0">
+                        <input class="form-check-input position-static" type="checkbox" checked>
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+                <!-- Card footer -->
+                <div class="card-footer">
+                  <div class="row align-items-center">
+                    <div class="col-auto ml-auto">
+                      <div class="avatar-list avatar-list-stacked">
+                        <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                        <span class="avatar avatar-sm avatar-rounded">JL</span>
+                        <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/002m.jpg)"></span>
+                        <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/003m.jpg)"></span>
+                        <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/000f.jpg)"></span>
+                        <span class="avatar avatar-sm avatar-rounded">+3</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-header">
+                  <ul class="nav nav-tabs card-header-tabs">
+                    <li class="nav-item">
+                      <a class="nav-link active" href="#">
+                        Active
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link" href="#">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                        Link
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
+                        Disabled
+                      </a>
+                    </li>
+                    <li class="nav-item ml-auto">
+                      <a class="nav-link" href="#">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div class="card-body">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-header">
+                  <ul class="nav nav-pills card-header-pills">
+                    <li class="nav-item">
+                      <a class="nav-link active" href="#">
+                        Active
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link" href="#">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                        Link
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
+                        Disabled
+                      </a>
+                    </li>
+                    <li class="nav-item ml-auto">
+                      <a class="nav-link" href="#">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div class="card-body">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="empty">
+                  <div class="empty-icon">
+                    <img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128" class="mb-4"  alt="">
+                  </div>
+                  <p class="empty-title">No results found</p>
+                  <p class="empty-subtitle text-muted">
+                    Try adjusting your search or filter to find what you're looking for.
+                  </p>
+                  <div class="empty-action">
+                    <a href="./." class="btn btn-primary">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                      Search again
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <h3 class="card-title">Card with progress bar</h3>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+                <div class="progress progress-sm card-progress">
+                  <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
+                    <span class="visually-hidden">38% Complete</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <h3 class="card-title">Card title</h3>
+                  <div class="card-subtitle">Card subtitle</div>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-header">
+                  <h3 class="card-title">Header title</h3>
+                </div>
+                <div class="card-body">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <div class="mb-3">
+                    <div class="form-label">Card number</div>
+                    <input type="text" name="input-mask" class="form-control" data-mask="0000 0000 0000 0000" data-mask-visible="true" autocomplete="off"/>
+                  </div>
+                  <div class="mb-3">
+                    <div class="form-label">Card name</div>
+                    <input type="text" class="form-control">
+                  </div>
+                  <div class="row">
+                    <div class="col-8">
+                      <div class="mb-3">
+                        <label class="form-label">Expiration date</label>
+                        <div class="row g-2">
+                          <div class="col">
+                            <select class="form-select">
+                              <option value="1">1</option>
+                              <option value="2">2</option>
+                              <option value="3">3</option>
+                              <option value="4">4</option>
+                              <option value="5">5</option>
+                              <option value="6">6</option>
+                              <option value="7">7</option>
+                              <option value="8">8</option>
+                              <option value="9">9</option>
+                              <option value="10">10</option>
+                              <option value="11">11</option>
+                              <option value="12">12</option>
+                            </select>
+                          </div>
+                          <div class="col">
+                            <select class="form-select">
+                              <option value="2020">2020</option>
+                              <option value="2021">2021</option>
+                              <option value="2022">2022</option>
+                              <option value="2023">2023</option>
+                              <option value="2024">2024</option>
+                              <option value="2025">2025</option>
+                              <option value="2026">2026</option>
+                              <option value="2027">2027</option>
+                              <option value="2028">2028</option>
+                              <option value="2029">2029</option>
+                              <option value="2030">2030</option>
+                            </select>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col">
+                      <div class="mb-3">
+                        <div class="form-label">CVV</div>
+                        <input type="number" class="form-control">
+                      </div>
+                    </div>
+                  </div>
+                  <div class="mt-2">
+                    <a href="#" class="btn btn-primary btn-block">
+                      Pay now
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ml-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright © 2020
+                    <a href="." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js"></script>
+    <script>
+      document.body.style.display = "block"
+    </script>
+  </body>
+</html>

demo/components.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <meta charset="utf-8">
-  <title>Redirecting…</title>
-  <link rel="canonical" href="./components/card-buttons.html">
-  <meta http-equiv="refresh" content="0; url=./components/card-buttons.html">
-  <meta name="robots" content="noindex">
-  <noscript><a href="./components/card-buttons.html">Click here if you are not redirected.</a></noscript>
-  <script>
-    location="./components/card-buttons.html";
-  </script>
-</html>

demo/components/card-buttons.html

@@ -1,837 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
-* @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"/>
-    <title>Card with footer 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"/>
-    <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"/>
-    <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?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" 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?1582373134" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <div class="navbar-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
-            <ul class="navbar-nav">
-              <li class="nav-item">
-                <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Home</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Base</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
-                  <li >
-                    <a class="dropdown-item" href="../empty.html" >
-                      Empty page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blank.html" >
-                      Blank page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" 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="../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">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Extra</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
-                  <li >
-                    <a class="dropdown-item" href="../invoice.html" >
-                      Invoice
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blog.html" >
-                      Blog cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../snippets.html" >
-                      Snippets
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../search-results.html" >
-                      Search results
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../pricing.html" >
-                      Pricing cards
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Docs</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/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/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
-            </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <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>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
-            </div>
-          </div>
-        </div>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex">
-            <div class="input-icon w-100">
-              <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 form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <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>
-            </li>
-            <li class="nav-item dropdown pl-2">
-              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
-      <div class="content">
-        <div class="container">
-          <!-- Page title -->
-          <div class="page-header">
-            <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">
-                    <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 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>
-      </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-customize" tabindex="-1" role="dialog" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">Customize Tabler</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <svg xmlns="http://www.w3.org/2000/svg" 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="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-          </button>
-        </div>
-        <div class="modal-body">
-          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-          <div class="mb-3">
-            <label class="form-label">Color scheme</label>
-            <div class="form-hint">Light or dark presentation.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" 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="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" 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 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                Dark</button>
-            </div>
-          </div>
-          <div class="mb-4 text-muted">
-            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Navigation position</label>
-            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar size</label>
-            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar position</label>
-            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-            </div>
-          </div>
-          <div>
-            <label class="form-label">Navigation color</label>
-            <div class="form-hint">Light or dark version of the sidebar </div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1582373134"></script>
-  <script>
-    (function() {
-    	var navbarPrimary = document.getElementById('navbar-primary'),
-    		navbarSecondary = document.getElementById('navbar-secondary');
-    	var defaults = {
-    		theme: 'light',
-    		'navbar-position': 'horizontal',
-    		'navbar-size': 'wide',
-    		'navbar-side': 'left',
-    		'navbar-color': 'light',
-    	};
-    	var eventsClean = {
-    		'theme': function () {
-    			document.body.classList.remove('theme-dark');
-    		},
-    		'navbar-position': function () {
-    			navbarPrimary.classList.remove('navbar-vertical');
-    			navbarSecondary.classList.remove('d-none');
-    		},
-    		'navbar-size': function () {
-    			navbarPrimary.classList.remove('navbar-vertical-narrow');
-    		},
-    		'navbar-side': function () {
-    			navbarPrimary.classList.remove('navbar-right');
-    		},
-    		'navbar-color': function () {
-    			navbarPrimary.classList.remove('navbar-dark');
-    			navbarPrimary.classList.add('navbar-light');
-    		},
-    	};
-    	var events = {
-    		'theme:light': function () {
-    		},
-    		'theme:dark': function () {
-    			document.body.classList.add('theme-dark');
-    		},
-    		'navbar-position:vertical': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    			navbarSecondary.classList.add('d-none');
-    		},
-    		'navbar-position:horizontal': function () {
-    		},
-    		'navbar-position:both': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    		},
-    		'navbar-size:wide': function () {
-    		},
-    		'navbar-size:narrow': function () {
-    			navbarPrimary.classList.add('navbar-vertical-narrow');
-    		},
-    		'navbar-side:left': function () {
-    		},
-    		'navbar-side:right': function () {
-    			navbarPrimary.classList.add('navbar-right');
-    		},
-    		'navbar-color:light': function () {
-    		},
-    		'navbar-color:dark': function () {
-    			navbarPrimary.classList.add('navbar-dark');
-    			navbarPrimary.classList.remove('navbar-light');
-    		},
-    	};
-    	var updateThemeConfig = function (name) {
-    		var key, value;
-    		if (name) {
-    			[key, value] = name.split(':');
-    			setConfig(key, value);
-    		}
-    		applyConfig();
-    	};
-    	var disableTransitions = function () {
-    		document.body.classList.add('no-transitions');
-    		setTimeout(function () {
-    			document.body.classList.remove('no-transitions');
-    		}, 300);
-    	};
-    	var getConfig = function () {
-    		var config = {};
-    		for (var key in defaults) {
-    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-    		}
-    		return config;
-    	};
-    	var setConfig = function (key, value) {
-    		localStorage.setItem('tabler-' + key, value);
-    	};
-    	var applyConfig = function () {
-    		disableTransitions();
-    		var config = getConfig();
-    		for (var key in config) {
-    			var value = config[key];
-    			eventsClean[key] && eventsClean[key].call();
-    			events[key + ':' + value] && events[key + ':' + value].call();
-    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-    				activeTrigger.classList.remove('active')
-    			});
-    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-    		}
-    	};
-    	applyConfig();
-    	for (var name in events) {
-    		var event = events[name];
-    		(function (event, name) {
-    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-    				updateThemeConfig(name);
-    				event.call();
-    				e.preventDefault();
-    				return false;
-    			});
-    		})(event, name);
-    	}
-    })();
-  </script>
-  <script>
-    document.body.style.display = "block"
-  </script>
-</body>
-</html>

demo/components/card-ribbon.html

@@ -1,823 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
-* @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"/>
-    <title>Card with ribbon - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <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?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" 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?1582373134" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <div class="navbar-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
-            <ul class="navbar-nav">
-              <li class="nav-item">
-                <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Home</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Base</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
-                  <li >
-                    <a class="dropdown-item" href="../empty.html" >
-                      Empty page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blank.html" >
-                      Blank page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" 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="../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">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Extra</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
-                  <li >
-                    <a class="dropdown-item" href="../invoice.html" >
-                      Invoice
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blog.html" >
-                      Blog cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../snippets.html" >
-                      Snippets
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../search-results.html" >
-                      Search results
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../pricing.html" >
-                      Pricing cards
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Docs</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/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/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
-            </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <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>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
-            </div>
-          </div>
-        </div>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex">
-            <div class="input-icon w-100">
-              <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 form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <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>
-            </li>
-            <li class="nav-item dropdown pl-2">
-              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
-      <div class="content">
-        <div class="container">
-          <!-- Page title -->
-          <div class="page-header">
-            <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"><svg xmlns="http://www.w3.org/2000/svg" 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-filled"><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>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                    <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"><svg xmlns="http://www.w3.org/2000/svg" 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-filled"><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>
-                      </div>
-                    </div>
-                  </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\"><svg xmlns=\"http://www.w3.org/2000/svg\" 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-filled\"><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>\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>
-      </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-customize" tabindex="-1" role="dialog" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">Customize Tabler</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <svg xmlns="http://www.w3.org/2000/svg" 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="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-          </button>
-        </div>
-        <div class="modal-body">
-          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-          <div class="mb-3">
-            <label class="form-label">Color scheme</label>
-            <div class="form-hint">Light or dark presentation.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" 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="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" 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 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                Dark</button>
-            </div>
-          </div>
-          <div class="mb-4 text-muted">
-            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Navigation position</label>
-            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar size</label>
-            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar position</label>
-            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-            </div>
-          </div>
-          <div>
-            <label class="form-label">Navigation color</label>
-            <div class="form-hint">Light or dark version of the sidebar </div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1582373134"></script>
-  <script>
-    (function() {
-    	var navbarPrimary = document.getElementById('navbar-primary'),
-    		navbarSecondary = document.getElementById('navbar-secondary');
-    	var defaults = {
-    		theme: 'light',
-    		'navbar-position': 'horizontal',
-    		'navbar-size': 'wide',
-    		'navbar-side': 'left',
-    		'navbar-color': 'light',
-    	};
-    	var eventsClean = {
-    		'theme': function () {
-    			document.body.classList.remove('theme-dark');
-    		},
-    		'navbar-position': function () {
-    			navbarPrimary.classList.remove('navbar-vertical');
-    			navbarSecondary.classList.remove('d-none');
-    		},
-    		'navbar-size': function () {
-    			navbarPrimary.classList.remove('navbar-vertical-narrow');
-    		},
-    		'navbar-side': function () {
-    			navbarPrimary.classList.remove('navbar-right');
-    		},
-    		'navbar-color': function () {
-    			navbarPrimary.classList.remove('navbar-dark');
-    			navbarPrimary.classList.add('navbar-light');
-    		},
-    	};
-    	var events = {
-    		'theme:light': function () {
-    		},
-    		'theme:dark': function () {
-    			document.body.classList.add('theme-dark');
-    		},
-    		'navbar-position:vertical': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    			navbarSecondary.classList.add('d-none');
-    		},
-    		'navbar-position:horizontal': function () {
-    		},
-    		'navbar-position:both': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    		},
-    		'navbar-size:wide': function () {
-    		},
-    		'navbar-size:narrow': function () {
-    			navbarPrimary.classList.add('navbar-vertical-narrow');
-    		},
-    		'navbar-side:left': function () {
-    		},
-    		'navbar-side:right': function () {
-    			navbarPrimary.classList.add('navbar-right');
-    		},
-    		'navbar-color:light': function () {
-    		},
-    		'navbar-color:dark': function () {
-    			navbarPrimary.classList.add('navbar-dark');
-    			navbarPrimary.classList.remove('navbar-light');
-    		},
-    	};
-    	var updateThemeConfig = function (name) {
-    		var key, value;
-    		if (name) {
-    			[key, value] = name.split(':');
-    			setConfig(key, value);
-    		}
-    		applyConfig();
-    	};
-    	var disableTransitions = function () {
-    		document.body.classList.add('no-transitions');
-    		setTimeout(function () {
-    			document.body.classList.remove('no-transitions');
-    		}, 300);
-    	};
-    	var getConfig = function () {
-    		var config = {};
-    		for (var key in defaults) {
-    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-    		}
-    		return config;
-    	};
-    	var setConfig = function (key, value) {
-    		localStorage.setItem('tabler-' + key, value);
-    	};
-    	var applyConfig = function () {
-    		disableTransitions();
-    		var config = getConfig();
-    		for (var key in config) {
-    			var value = config[key];
-    			eventsClean[key] && eventsClean[key].call();
-    			events[key + ':' + value] && events[key + ':' + value].call();
-    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-    				activeTrigger.classList.remove('active')
-    			});
-    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-    		}
-    	};
-    	applyConfig();
-    	for (var name in events) {
-    		var event = events[name];
-    		(function (event, name) {
-    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-    				updateThemeConfig(name);
-    				event.call();
-    				e.preventDefault();
-    				return false;
-    			});
-    		})(event, name);
-    	}
-    })();
-  </script>
-  <script>
-    document.body.style.display = "block"
-  </script>
-</body>
-</html>

demo/components/card-tabs-bottom.html

@@ -1,939 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
-* @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"/>
-    <title>Card with bottom tabs - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <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?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" 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?1582373134" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <div class="navbar-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
-            <ul class="navbar-nav">
-              <li class="nav-item">
-                <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Home</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Base</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
-                  <li >
-                    <a class="dropdown-item" href="../empty.html" >
-                      Empty page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blank.html" >
-                      Blank page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" 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="../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">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Extra</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
-                  <li >
-                    <a class="dropdown-item" href="../invoice.html" >
-                      Invoice
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blog.html" >
-                      Blog cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../snippets.html" >
-                      Snippets
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../search-results.html" >
-                      Search results
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../pricing.html" >
-                      Pricing cards
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Docs</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/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/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
-            </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <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>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
-            </div>
-          </div>
-        </div>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex">
-            <div class="input-icon w-100">
-              <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 form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <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>
-            </li>
-            <li class="nav-item dropdown pl-2">
-              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
-      <div class="content">
-        <div class="container">
-          <!-- Page title -->
-          <div class="page-header">
-            <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">
-                    <!-- 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 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>
-      </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-customize" tabindex="-1" role="dialog" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">Customize Tabler</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <svg xmlns="http://www.w3.org/2000/svg" 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="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-          </button>
-        </div>
-        <div class="modal-body">
-          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-          <div class="mb-3">
-            <label class="form-label">Color scheme</label>
-            <div class="form-hint">Light or dark presentation.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" 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="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" 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 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                Dark</button>
-            </div>
-          </div>
-          <div class="mb-4 text-muted">
-            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Navigation position</label>
-            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar size</label>
-            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar position</label>
-            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-            </div>
-          </div>
-          <div>
-            <label class="form-label">Navigation color</label>
-            <div class="form-hint">Light or dark version of the sidebar </div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1582373134"></script>
-  <script>
-    (function() {
-    	var navbarPrimary = document.getElementById('navbar-primary'),
-    		navbarSecondary = document.getElementById('navbar-secondary');
-    	var defaults = {
-    		theme: 'light',
-    		'navbar-position': 'horizontal',
-    		'navbar-size': 'wide',
-    		'navbar-side': 'left',
-    		'navbar-color': 'light',
-    	};
-    	var eventsClean = {
-    		'theme': function () {
-    			document.body.classList.remove('theme-dark');
-    		},
-    		'navbar-position': function () {
-    			navbarPrimary.classList.remove('navbar-vertical');
-    			navbarSecondary.classList.remove('d-none');
-    		},
-    		'navbar-size': function () {
-    			navbarPrimary.classList.remove('navbar-vertical-narrow');
-    		},
-    		'navbar-side': function () {
-    			navbarPrimary.classList.remove('navbar-right');
-    		},
-    		'navbar-color': function () {
-    			navbarPrimary.classList.remove('navbar-dark');
-    			navbarPrimary.classList.add('navbar-light');
-    		},
-    	};
-    	var events = {
-    		'theme:light': function () {
-    		},
-    		'theme:dark': function () {
-    			document.body.classList.add('theme-dark');
-    		},
-    		'navbar-position:vertical': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    			navbarSecondary.classList.add('d-none');
-    		},
-    		'navbar-position:horizontal': function () {
-    		},
-    		'navbar-position:both': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    		},
-    		'navbar-size:wide': function () {
-    		},
-    		'navbar-size:narrow': function () {
-    			navbarPrimary.classList.add('navbar-vertical-narrow');
-    		},
-    		'navbar-side:left': function () {
-    		},
-    		'navbar-side:right': function () {
-    			navbarPrimary.classList.add('navbar-right');
-    		},
-    		'navbar-color:light': function () {
-    		},
-    		'navbar-color:dark': function () {
-    			navbarPrimary.classList.add('navbar-dark');
-    			navbarPrimary.classList.remove('navbar-light');
-    		},
-    	};
-    	var updateThemeConfig = function (name) {
-    		var key, value;
-    		if (name) {
-    			[key, value] = name.split(':');
-    			setConfig(key, value);
-    		}
-    		applyConfig();
-    	};
-    	var disableTransitions = function () {
-    		document.body.classList.add('no-transitions');
-    		setTimeout(function () {
-    			document.body.classList.remove('no-transitions');
-    		}, 300);
-    	};
-    	var getConfig = function () {
-    		var config = {};
-    		for (var key in defaults) {
-    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-    		}
-    		return config;
-    	};
-    	var setConfig = function (key, value) {
-    		localStorage.setItem('tabler-' + key, value);
-    	};
-    	var applyConfig = function () {
-    		disableTransitions();
-    		var config = getConfig();
-    		for (var key in config) {
-    			var value = config[key];
-    			eventsClean[key] && eventsClean[key].call();
-    			events[key + ':' + value] && events[key + ':' + value].call();
-    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-    				activeTrigger.classList.remove('active')
-    			});
-    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-    		}
-    	};
-    	applyConfig();
-    	for (var name in events) {
-    		var event = events[name];
-    		(function (event, name) {
-    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-    				updateThemeConfig(name);
-    				event.call();
-    				e.preventDefault();
-    				return false;
-    			});
-    		})(event, name);
-    	}
-    })();
-  </script>
-  <script>
-    document.body.style.display = "block"
-  </script>
-</body>
-</html>

demo/components/card-with-image.html

@@ -1,839 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
-* @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"/>
-    <title>Card with side image - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <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?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" 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?1582373134" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <div class="navbar-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
-            <ul class="navbar-nav">
-              <li class="nav-item">
-                <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Home</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Base</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
-                  <li >
-                    <a class="dropdown-item" href="../empty.html" >
-                      Empty page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blank.html" >
-                      Blank page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" 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="../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">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Extra</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
-                  <li >
-                    <a class="dropdown-item" href="../invoice.html" >
-                      Invoice
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blog.html" >
-                      Blog cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../snippets.html" >
-                      Snippets
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../search-results.html" >
-                      Search results
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../pricing.html" >
-                      Pricing cards
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Docs</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/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/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
-            </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <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>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
-            </div>
-          </div>
-        </div>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex">
-            <div class="input-icon w-100">
-              <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 form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <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>
-            </li>
-            <li class="nav-item dropdown pl-2">
-              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
-      <div class="content">
-        <div class="container">
-          <!-- Page title -->
-          <div class="page-header">
-            <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">
-                    <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 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>
-      </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-customize" tabindex="-1" role="dialog" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">Customize Tabler</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <svg xmlns="http://www.w3.org/2000/svg" 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="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-          </button>
-        </div>
-        <div class="modal-body">
-          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-          <div class="mb-3">
-            <label class="form-label">Color scheme</label>
-            <div class="form-hint">Light or dark presentation.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" 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="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" 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 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                Dark</button>
-            </div>
-          </div>
-          <div class="mb-4 text-muted">
-            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Navigation position</label>
-            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar size</label>
-            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar position</label>
-            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-            </div>
-          </div>
-          <div>
-            <label class="form-label">Navigation color</label>
-            <div class="form-hint">Light or dark version of the sidebar </div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1582373134"></script>
-  <script>
-    (function() {
-    	var navbarPrimary = document.getElementById('navbar-primary'),
-    		navbarSecondary = document.getElementById('navbar-secondary');
-    	var defaults = {
-    		theme: 'light',
-    		'navbar-position': 'horizontal',
-    		'navbar-size': 'wide',
-    		'navbar-side': 'left',
-    		'navbar-color': 'light',
-    	};
-    	var eventsClean = {
-    		'theme': function () {
-    			document.body.classList.remove('theme-dark');
-    		},
-    		'navbar-position': function () {
-    			navbarPrimary.classList.remove('navbar-vertical');
-    			navbarSecondary.classList.remove('d-none');
-    		},
-    		'navbar-size': function () {
-    			navbarPrimary.classList.remove('navbar-vertical-narrow');
-    		},
-    		'navbar-side': function () {
-    			navbarPrimary.classList.remove('navbar-right');
-    		},
-    		'navbar-color': function () {
-    			navbarPrimary.classList.remove('navbar-dark');
-    			navbarPrimary.classList.add('navbar-light');
-    		},
-    	};
-    	var events = {
-    		'theme:light': function () {
-    		},
-    		'theme:dark': function () {
-    			document.body.classList.add('theme-dark');
-    		},
-    		'navbar-position:vertical': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    			navbarSecondary.classList.add('d-none');
-    		},
-    		'navbar-position:horizontal': function () {
-    		},
-    		'navbar-position:both': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    		},
-    		'navbar-size:wide': function () {
-    		},
-    		'navbar-size:narrow': function () {
-    			navbarPrimary.classList.add('navbar-vertical-narrow');
-    		},
-    		'navbar-side:left': function () {
-    		},
-    		'navbar-side:right': function () {
-    			navbarPrimary.classList.add('navbar-right');
-    		},
-    		'navbar-color:light': function () {
-    		},
-    		'navbar-color:dark': function () {
-    			navbarPrimary.classList.add('navbar-dark');
-    			navbarPrimary.classList.remove('navbar-light');
-    		},
-    	};
-    	var updateThemeConfig = function (name) {
-    		var key, value;
-    		if (name) {
-    			[key, value] = name.split(':');
-    			setConfig(key, value);
-    		}
-    		applyConfig();
-    	};
-    	var disableTransitions = function () {
-    		document.body.classList.add('no-transitions');
-    		setTimeout(function () {
-    			document.body.classList.remove('no-transitions');
-    		}, 300);
-    	};
-    	var getConfig = function () {
-    		var config = {};
-    		for (var key in defaults) {
-    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-    		}
-    		return config;
-    	};
-    	var setConfig = function (key, value) {
-    		localStorage.setItem('tabler-' + key, value);
-    	};
-    	var applyConfig = function () {
-    		disableTransitions();
-    		var config = getConfig();
-    		for (var key in config) {
-    			var value = config[key];
-    			eventsClean[key] && eventsClean[key].call();
-    			events[key + ':' + value] && events[key + ':' + value].call();
-    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-    				activeTrigger.classList.remove('active')
-    			});
-    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-    		}
-    	};
-    	applyConfig();
-    	for (var name in events) {
-    		var event = events[name];
-    		(function (event, name) {
-    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-    				updateThemeConfig(name);
-    				event.call();
-    				e.preventDefault();
-    				return false;
-    			});
-    		})(event, name);
-    	}
-    })();
-  </script>
-  <script>
-    document.body.style.display = "block"
-  </script>
-</body>
-</html>

demo/components/empty.html

@@ -1,842 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
-* @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"/>
-    <title>Empty state - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <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?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" 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?1582373134" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <div class="navbar-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
-            <ul class="navbar-nav">
-              <li class="nav-item">
-                <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Home</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Base</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
-                  <li >
-                    <a class="dropdown-item" href="../empty.html" >
-                      Empty page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blank.html" >
-                      Blank page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" 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="../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">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Extra</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
-                  <li >
-                    <a class="dropdown-item" href="../invoice.html" >
-                      Invoice
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blog.html" >
-                      Blog cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../snippets.html" >
-                      Snippets
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../search-results.html" >
-                      Search results
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../pricing.html" >
-                      Pricing cards
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Docs</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/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/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
-            </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <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>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
-            </div>
-          </div>
-        </div>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex">
-            <div class="input-icon w-100">
-              <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 form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <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>
-            </li>
-            <li class="nav-item dropdown pl-2">
-              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
-      <div class="content">
-        <div class="container">
-          <!-- Page title -->
-          <div class="page-header">
-            <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">
-                    <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 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   </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   </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>
-</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-customize" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title">Customize Tabler</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <svg xmlns="http://www.w3.org/2000/svg" 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="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-        </button>
-      </div>
-      <div class="modal-body">
-        <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-        <div class="mb-3">
-          <label class="form-label">Color scheme</label>
-          <div class="form-hint">Light or dark presentation.</div>
-          <div class="btn-group w-100">
-            <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" 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="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-              Light</button>
-            <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" 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 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-              Dark</button>
-          </div>
-        </div>
-        <div class="mb-4 text-muted">
-          You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-        </div>
-        <div class="mb-3">
-          <label class="form-label">Navigation position</label>
-          <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-          <div class="btn-group w-100">
-            <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-            <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-            <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-          </div>
-        </div>
-        <div class="mb-3">
-          <label class="form-label">Sidebar size</label>
-          <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-          <div class="btn-group w-100">
-            <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-            <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-          </div>
-        </div>
-        <div class="mb-3">
-          <label class="form-label">Sidebar position</label>
-          <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-          <div class="btn-group w-100">
-            <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-            <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-          </div>
-        </div>
-        <div>
-          <label class="form-label">Navigation color</label>
-          <div class="form-hint">Light or dark version of the sidebar </div>
-          <div class="btn-group w-100">
-            <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-            <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<!-- Libs JS -->
-<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
-<script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
-<!-- Tabler Core -->
-<script src="../dist/js/tabler.min.js?1582373134"></script>
-<script>
-  (function() {
-  	var navbarPrimary = document.getElementById('navbar-primary'),
-  		navbarSecondary = document.getElementById('navbar-secondary');
-  	var defaults = {
-  		theme: 'light',
-  		'navbar-position': 'horizontal',
-  		'navbar-size': 'wide',
-  		'navbar-side': 'left',
-  		'navbar-color': 'light',
-  	};
-  	var eventsClean = {
-  		'theme': function () {
-  			document.body.classList.remove('theme-dark');
-  		},
-  		'navbar-position': function () {
-  			navbarPrimary.classList.remove('navbar-vertical');
-  			navbarSecondary.classList.remove('d-none');
-  		},
-  		'navbar-size': function () {
-  			navbarPrimary.classList.remove('navbar-vertical-narrow');
-  		},
-  		'navbar-side': function () {
-  			navbarPrimary.classList.remove('navbar-right');
-  		},
-  		'navbar-color': function () {
-  			navbarPrimary.classList.remove('navbar-dark');
-  			navbarPrimary.classList.add('navbar-light');
-  		},
-  	};
-  	var events = {
-  		'theme:light': function () {
-  		},
-  		'theme:dark': function () {
-  			document.body.classList.add('theme-dark');
-  		},
-  		'navbar-position:vertical': function () {
-  			navbarPrimary.classList.add('navbar-vertical');
-  			navbarSecondary.classList.add('d-none');
-  		},
-  		'navbar-position:horizontal': function () {
-  		},
-  		'navbar-position:both': function () {
-  			navbarPrimary.classList.add('navbar-vertical');
-  		},
-  		'navbar-size:wide': function () {
-  		},
-  		'navbar-size:narrow': function () {
-  			navbarPrimary.classList.add('navbar-vertical-narrow');
-  		},
-  		'navbar-side:left': function () {
-  		},
-  		'navbar-side:right': function () {
-  			navbarPrimary.classList.add('navbar-right');
-  		},
-  		'navbar-color:light': function () {
-  		},
-  		'navbar-color:dark': function () {
-  			navbarPrimary.classList.add('navbar-dark');
-  			navbarPrimary.classList.remove('navbar-light');
-  		},
-  	};
-  	var updateThemeConfig = function (name) {
-  		var key, value;
-  		if (name) {
-  			[key, value] = name.split(':');
-  			setConfig(key, value);
-  		}
-  		applyConfig();
-  	};
-  	var disableTransitions = function () {
-  		document.body.classList.add('no-transitions');
-  		setTimeout(function () {
-  			document.body.classList.remove('no-transitions');
-  		}, 300);
-  	};
-  	var getConfig = function () {
-  		var config = {};
-  		for (var key in defaults) {
-  			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-  		}
-  		return config;
-  	};
-  	var setConfig = function (key, value) {
-  		localStorage.setItem('tabler-' + key, value);
-  	};
-  	var applyConfig = function () {
-  		disableTransitions();
-  		var config = getConfig();
-  		for (var key in config) {
-  			var value = config[key];
-  			eventsClean[key] && eventsClean[key].call();
-  			events[key + ':' + value] && events[key + ':' + value].call();
-  			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-  				activeTrigger.classList.remove('active')
-  			});
-  			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-  		}
-  	};
-  	applyConfig();
-  	for (var name in events) {
-  		var event = events[name];
-  		(function (event, name) {
-  			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-  				updateThemeConfig(name);
-  				event.call();
-  				e.preventDefault();
-  				return false;
-  			});
-  		})(event, name);
-  	}
-  })();
-</script>
-<script>
-  document.body.style.display = "block"
-</script>
-</body>
-</html>

demo/components/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <meta charset="utf-8">
-  <title>Redirecting…</title>
-  <link rel="canonical" href="../components.html">
-  <meta http-equiv="refresh" content="0; url=../components.html">
-  <meta name="robots" content="noindex">
-  <noscript><a href="../components.html">Click here if you are not redirected.</a></noscript>
-  <script>
-    location="../components.html";
-  </script>
-</html>

demo/components/input-colors.html

@@ -1,965 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
-* @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"/>
-    <title>Color input - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <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?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" 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?1582373134" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <div class="navbar-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
-            <ul class="navbar-nav">
-              <li class="nav-item">
-                <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Home</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Base</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
-                  <li >
-                    <a class="dropdown-item" href="../empty.html" >
-                      Empty page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blank.html" >
-                      Blank page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" 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="../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">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Extra</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
-                  <li >
-                    <a class="dropdown-item" href="../invoice.html" >
-                      Invoice
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blog.html" >
-                      Blog cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../snippets.html" >
-                      Snippets
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../search-results.html" >
-                      Search results
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../pricing.html" >
-                      Pricing cards
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Docs</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/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/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
-            </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <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>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
-            </div>
-          </div>
-        </div>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex">
-            <div class="input-icon w-100">
-              <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 form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <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>
-            </li>
-            <li class="nav-item dropdown pl-2">
-              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
-      <div class="content">
-        <div class="container">
-          <!-- Page title -->
-          <div class="page-header">
-            <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-sm">
-                            <div class="col-auto">
-                              <label class="form-colorinput">
-                                <input name="color" type="radio" 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="radio" 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="radio" value="blue" class="form-colorinput-input" />
-                                <span class="form-colorinput-color bg-blue"></span>
-                              </label>
-                            </div>
-                            <div class="col-auto">
-                              <label class="form-colorinput">
-                                <input name="color" type="radio" value="azure" class="form-colorinput-input" />
-                                <span class="form-colorinput-color bg-azure"></span>
-                              </label>
-                            </div>
-                            <div class="col-auto">
-                              <label class="form-colorinput">
-                                <input name="color" type="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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">
-                    <div class="mb-3">
-                      <label class="form-label">Color Input</label>
-                      <div class="row row-sm">
-                        <div class="col-auto">
-                          <label class="form-colorinput">
-                            <input name="color" type="radio" 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="radio" 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="radio" value="blue" class="form-colorinput-input" />
-                            <span class="form-colorinput-color bg-blue"></span>
-                          </label>
-                        </div>
-                        <div class="col-auto">
-                          <label class="form-colorinput">
-                            <input name="color" type="radio" value="azure" class="form-colorinput-input" />
-                            <span class="form-colorinput-color bg-azure"></span>
-                          </label>
-                        </div>
-                        <div class="col-auto">
-                          <label class="form-colorinput">
-                            <input name="color" type="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" value="lime" class="form-colorinput-input" />
-                            <span class="form-colorinput-color bg-lime"></span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </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-sm\">\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=\"radio\" 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=\"radio\" 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=\"radio\" value=\"blue\" class=\"form-colorinput-input\" />\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=\"radio\" value=\"azure\" class=\"form-colorinput-input\" />\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=\"radio\" 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=\"radio\" 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=\"radio\" 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=\"radio\" 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=\"radio\" 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=\"radio\" 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=\"radio\" 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>
-      </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-customize" tabindex="-1" role="dialog" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">Customize Tabler</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <svg xmlns="http://www.w3.org/2000/svg" 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="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-          </button>
-        </div>
-        <div class="modal-body">
-          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-          <div class="mb-3">
-            <label class="form-label">Color scheme</label>
-            <div class="form-hint">Light or dark presentation.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" 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="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" 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 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                Dark</button>
-            </div>
-          </div>
-          <div class="mb-4 text-muted">
-            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Navigation position</label>
-            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar size</label>
-            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar position</label>
-            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-            </div>
-          </div>
-          <div>
-            <label class="form-label">Navigation color</label>
-            <div class="form-hint">Light or dark version of the sidebar </div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1582373134"></script>
-  <script>
-    (function() {
-    	var navbarPrimary = document.getElementById('navbar-primary'),
-    		navbarSecondary = document.getElementById('navbar-secondary');
-    	var defaults = {
-    		theme: 'light',
-    		'navbar-position': 'horizontal',
-    		'navbar-size': 'wide',
-    		'navbar-side': 'left',
-    		'navbar-color': 'light',
-    	};
-    	var eventsClean = {
-    		'theme': function () {
-    			document.body.classList.remove('theme-dark');
-    		},
-    		'navbar-position': function () {
-    			navbarPrimary.classList.remove('navbar-vertical');
-    			navbarSecondary.classList.remove('d-none');
-    		},
-    		'navbar-size': function () {
-    			navbarPrimary.classList.remove('navbar-vertical-narrow');
-    		},
-    		'navbar-side': function () {
-    			navbarPrimary.classList.remove('navbar-right');
-    		},
-    		'navbar-color': function () {
-    			navbarPrimary.classList.remove('navbar-dark');
-    			navbarPrimary.classList.add('navbar-light');
-    		},
-    	};
-    	var events = {
-    		'theme:light': function () {
-    		},
-    		'theme:dark': function () {
-    			document.body.classList.add('theme-dark');
-    		},
-    		'navbar-position:vertical': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    			navbarSecondary.classList.add('d-none');
-    		},
-    		'navbar-position:horizontal': function () {
-    		},
-    		'navbar-position:both': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    		},
-    		'navbar-size:wide': function () {
-    		},
-    		'navbar-size:narrow': function () {
-    			navbarPrimary.classList.add('navbar-vertical-narrow');
-    		},
-    		'navbar-side:left': function () {
-    		},
-    		'navbar-side:right': function () {
-    			navbarPrimary.classList.add('navbar-right');
-    		},
-    		'navbar-color:light': function () {
-    		},
-    		'navbar-color:dark': function () {
-    			navbarPrimary.classList.add('navbar-dark');
-    			navbarPrimary.classList.remove('navbar-light');
-    		},
-    	};
-    	var updateThemeConfig = function (name) {
-    		var key, value;
-    		if (name) {
-    			[key, value] = name.split(':');
-    			setConfig(key, value);
-    		}
-    		applyConfig();
-    	};
-    	var disableTransitions = function () {
-    		document.body.classList.add('no-transitions');
-    		setTimeout(function () {
-    			document.body.classList.remove('no-transitions');
-    		}, 300);
-    	};
-    	var getConfig = function () {
-    		var config = {};
-    		for (var key in defaults) {
-    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-    		}
-    		return config;
-    	};
-    	var setConfig = function (key, value) {
-    		localStorage.setItem('tabler-' + key, value);
-    	};
-    	var applyConfig = function () {
-    		disableTransitions();
-    		var config = getConfig();
-    		for (var key in config) {
-    			var value = config[key];
-    			eventsClean[key] && eventsClean[key].call();
-    			events[key + ':' + value] && events[key + ':' + value].call();
-    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-    				activeTrigger.classList.remove('active')
-    			});
-    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-    		}
-    	};
-    	applyConfig();
-    	for (var name in events) {
-    		var event = events[name];
-    		(function (event, name) {
-    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-    				updateThemeConfig(name);
-    				event.call();
-    				e.preventDefault();
-    				return false;
-    			});
-    		})(event, name);
-    	}
-    })();
-  </script>
-  <script>
-    document.body.style.display = "block"
-  </script>
-</body>
-</html>

demo/components/input-image.html

@@ -1,973 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
-* @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"/>
-    <title>Image input - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <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?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" 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?1582373134" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <div class="navbar-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
-            <ul class="navbar-nav">
-              <li class="nav-item">
-                <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Home</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Base</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
-                  <li >
-                    <a class="dropdown-item" href="../empty.html" >
-                      Empty page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blank.html" >
-                      Blank page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" 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="../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">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Extra</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
-                  <li >
-                    <a class="dropdown-item" href="../invoice.html" >
-                      Invoice
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blog.html" >
-                      Blog cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../snippets.html" >
-                      Snippets
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../search-results.html" >
-                      Search results
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../pricing.html" >
-                      Pricing cards
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Docs</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/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/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
-            </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <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>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
-            </div>
-          </div>
-        </div>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex">
-            <div class="input-icon w-100">
-              <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 form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <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>
-            </li>
-            <li class="nav-item dropdown pl-2">
-              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
-      <div class="content">
-        <div class="container">
-          <!-- Page title -->
-          <div class="page-header">
-            <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-sm">
-                            <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">
-                    <div class="mb-3">
-                      <label class="form-label">Image Check</label>
-                      <div class="row row-sm">
-                        <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 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-sm\">\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>
-      </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-customize" tabindex="-1" role="dialog" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">Customize Tabler</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <svg xmlns="http://www.w3.org/2000/svg" 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="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-          </button>
-        </div>
-        <div class="modal-body">
-          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-          <div class="mb-3">
-            <label class="form-label">Color scheme</label>
-            <div class="form-hint">Light or dark presentation.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" 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="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" 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 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                Dark</button>
-            </div>
-          </div>
-          <div class="mb-4 text-muted">
-            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Navigation position</label>
-            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar size</label>
-            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar position</label>
-            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-            </div>
-          </div>
-          <div>
-            <label class="form-label">Navigation color</label>
-            <div class="form-hint">Light or dark version of the sidebar </div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1582373134"></script>
-  <script>
-    (function() {
-    	var navbarPrimary = document.getElementById('navbar-primary'),
-    		navbarSecondary = document.getElementById('navbar-secondary');
-    	var defaults = {
-    		theme: 'light',
-    		'navbar-position': 'horizontal',
-    		'navbar-size': 'wide',
-    		'navbar-side': 'left',
-    		'navbar-color': 'light',
-    	};
-    	var eventsClean = {
-    		'theme': function () {
-    			document.body.classList.remove('theme-dark');
-    		},
-    		'navbar-position': function () {
-    			navbarPrimary.classList.remove('navbar-vertical');
-    			navbarSecondary.classList.remove('d-none');
-    		},
-    		'navbar-size': function () {
-    			navbarPrimary.classList.remove('navbar-vertical-narrow');
-    		},
-    		'navbar-side': function () {
-    			navbarPrimary.classList.remove('navbar-right');
-    		},
-    		'navbar-color': function () {
-    			navbarPrimary.classList.remove('navbar-dark');
-    			navbarPrimary.classList.add('navbar-light');
-    		},
-    	};
-    	var events = {
-    		'theme:light': function () {
-    		},
-    		'theme:dark': function () {
-    			document.body.classList.add('theme-dark');
-    		},
-    		'navbar-position:vertical': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    			navbarSecondary.classList.add('d-none');
-    		},
-    		'navbar-position:horizontal': function () {
-    		},
-    		'navbar-position:both': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    		},
-    		'navbar-size:wide': function () {
-    		},
-    		'navbar-size:narrow': function () {
-    			navbarPrimary.classList.add('navbar-vertical-narrow');
-    		},
-    		'navbar-side:left': function () {
-    		},
-    		'navbar-side:right': function () {
-    			navbarPrimary.classList.add('navbar-right');
-    		},
-    		'navbar-color:light': function () {
-    		},
-    		'navbar-color:dark': function () {
-    			navbarPrimary.classList.add('navbar-dark');
-    			navbarPrimary.classList.remove('navbar-light');
-    		},
-    	};
-    	var updateThemeConfig = function (name) {
-    		var key, value;
-    		if (name) {
-    			[key, value] = name.split(':');
-    			setConfig(key, value);
-    		}
-    		applyConfig();
-    	};
-    	var disableTransitions = function () {
-    		document.body.classList.add('no-transitions');
-    		setTimeout(function () {
-    			document.body.classList.remove('no-transitions');
-    		}, 300);
-    	};
-    	var getConfig = function () {
-    		var config = {};
-    		for (var key in defaults) {
-    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-    		}
-    		return config;
-    	};
-    	var setConfig = function (key, value) {
-    		localStorage.setItem('tabler-' + key, value);
-    	};
-    	var applyConfig = function () {
-    		disableTransitions();
-    		var config = getConfig();
-    		for (var key in config) {
-    			var value = config[key];
-    			eventsClean[key] && eventsClean[key].call();
-    			events[key + ':' + value] && events[key + ':' + value].call();
-    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-    				activeTrigger.classList.remove('active')
-    			});
-    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-    		}
-    	};
-    	applyConfig();
-    	for (var name in events) {
-    		var event = events[name];
-    		(function (event, name) {
-    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-    				updateThemeConfig(name);
-    				event.call();
-    				e.preventDefault();
-    				return false;
-    			});
-    		})(event, name);
-    	}
-    })();
-  </script>
-  <script>
-    document.body.style.display = "block"
-  </script>
-</body>
-</html>

demo/components/progress.html

@@ -1,925 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
-* @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"/>
-    <title>Progress bar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <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?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" 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?1582373134" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <div class="navbar-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
-            <ul class="navbar-nav">
-              <li class="nav-item">
-                <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Home</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Base</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
-                  <li >
-                    <a class="dropdown-item" href="../empty.html" >
-                      Empty page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blank.html" >
-                      Blank page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" 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="../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">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Extra</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
-                  <li >
-                    <a class="dropdown-item" href="../invoice.html" >
-                      Invoice
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blog.html" >
-                      Blog cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../snippets.html" >
-                      Snippets
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../search-results.html" >
-                      Search results
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../pricing.html" >
-                      Pricing cards
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Docs</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/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/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
-            </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <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>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
-            </div>
-          </div>
-        </div>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex">
-            <div class="input-icon w-100">
-              <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 form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <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>
-            </li>
-            <li class="nav-item dropdown pl-2">
-              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
-      <div class="content">
-        <div class="container">
-          <!-- Page title -->
-          <div class="page-header">
-            <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">
-                    <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 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>
-      </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-customize" tabindex="-1" role="dialog" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">Customize Tabler</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <svg xmlns="http://www.w3.org/2000/svg" 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="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-          </button>
-        </div>
-        <div class="modal-body">
-          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-          <div class="mb-3">
-            <label class="form-label">Color scheme</label>
-            <div class="form-hint">Light or dark presentation.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" 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="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" 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 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                Dark</button>
-            </div>
-          </div>
-          <div class="mb-4 text-muted">
-            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Navigation position</label>
-            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar size</label>
-            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar position</label>
-            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-            </div>
-          </div>
-          <div>
-            <label class="form-label">Navigation color</label>
-            <div class="form-hint">Light or dark version of the sidebar </div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1582373134"></script>
-  <script>
-    (function() {
-    	var navbarPrimary = document.getElementById('navbar-primary'),
-    		navbarSecondary = document.getElementById('navbar-secondary');
-    	var defaults = {
-    		theme: 'light',
-    		'navbar-position': 'horizontal',
-    		'navbar-size': 'wide',
-    		'navbar-side': 'left',
-    		'navbar-color': 'light',
-    	};
-    	var eventsClean = {
-    		'theme': function () {
-    			document.body.classList.remove('theme-dark');
-    		},
-    		'navbar-position': function () {
-    			navbarPrimary.classList.remove('navbar-vertical');
-    			navbarSecondary.classList.remove('d-none');
-    		},
-    		'navbar-size': function () {
-    			navbarPrimary.classList.remove('navbar-vertical-narrow');
-    		},
-    		'navbar-side': function () {
-    			navbarPrimary.classList.remove('navbar-right');
-    		},
-    		'navbar-color': function () {
-    			navbarPrimary.classList.remove('navbar-dark');
-    			navbarPrimary.classList.add('navbar-light');
-    		},
-    	};
-    	var events = {
-    		'theme:light': function () {
-    		},
-    		'theme:dark': function () {
-    			document.body.classList.add('theme-dark');
-    		},
-    		'navbar-position:vertical': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    			navbarSecondary.classList.add('d-none');
-    		},
-    		'navbar-position:horizontal': function () {
-    		},
-    		'navbar-position:both': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    		},
-    		'navbar-size:wide': function () {
-    		},
-    		'navbar-size:narrow': function () {
-    			navbarPrimary.classList.add('navbar-vertical-narrow');
-    		},
-    		'navbar-side:left': function () {
-    		},
-    		'navbar-side:right': function () {
-    			navbarPrimary.classList.add('navbar-right');
-    		},
-    		'navbar-color:light': function () {
-    		},
-    		'navbar-color:dark': function () {
-    			navbarPrimary.classList.add('navbar-dark');
-    			navbarPrimary.classList.remove('navbar-light');
-    		},
-    	};
-    	var updateThemeConfig = function (name) {
-    		var key, value;
-    		if (name) {
-    			[key, value] = name.split(':');
-    			setConfig(key, value);
-    		}
-    		applyConfig();
-    	};
-    	var disableTransitions = function () {
-    		document.body.classList.add('no-transitions');
-    		setTimeout(function () {
-    			document.body.classList.remove('no-transitions');
-    		}, 300);
-    	};
-    	var getConfig = function () {
-    		var config = {};
-    		for (var key in defaults) {
-    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-    		}
-    		return config;
-    	};
-    	var setConfig = function (key, value) {
-    		localStorage.setItem('tabler-' + key, value);
-    	};
-    	var applyConfig = function () {
-    		disableTransitions();
-    		var config = getConfig();
-    		for (var key in config) {
-    			var value = config[key];
-    			eventsClean[key] && eventsClean[key].call();
-    			events[key + ':' + value] && events[key + ':' + value].call();
-    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-    				activeTrigger.classList.remove('active')
-    			});
-    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-    		}
-    	};
-    	applyConfig();
-    	for (var name in events) {
-    		var event = events[name];
-    		(function (event, name) {
-    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-    				updateThemeConfig(name);
-    				event.call();
-    				e.preventDefault();
-    				return false;
-    			});
-    		})(event, name);
-    	}
-    })();
-  </script>
-  <script>
-    document.body.style.display = "block"
-  </script>
-</body>
-</html>

demo/components/simple-avatar.html

@@ -1,801 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
-* @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"/>
-    <title>Simple avatar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <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?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" 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?1582373134" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <div class="navbar-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
-            <ul class="navbar-nav">
-              <li class="nav-item">
-                <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Home</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Base</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
-                  <li >
-                    <a class="dropdown-item" href="../empty.html" >
-                      Empty page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blank.html" >
-                      Blank page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" 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="../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">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Extra</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
-                  <li >
-                    <a class="dropdown-item" href="../invoice.html" >
-                      Invoice
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blog.html" >
-                      Blog cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../snippets.html" >
-                      Snippets
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../search-results.html" >
-                      Search results
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../pricing.html" >
-                      Pricing cards
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Docs</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/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/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
-            </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <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>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
-            </div>
-          </div>
-        </div>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex">
-            <div class="input-icon w-100">
-              <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 form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <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>
-            </li>
-            <li class="nav-item dropdown pl-2">
-              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
-      <div class="content">
-        <div class="container">
-          <!-- Page title -->
-          <div class="page-header">
-            <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">
-                    <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)">
-                      <span class="badge bg-green"></span></span>
-                  </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\t<span class=\"badge bg-green\"></span></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>
-      </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-customize" tabindex="-1" role="dialog" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">Customize Tabler</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <svg xmlns="http://www.w3.org/2000/svg" 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="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-          </button>
-        </div>
-        <div class="modal-body">
-          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-          <div class="mb-3">
-            <label class="form-label">Color scheme</label>
-            <div class="form-hint">Light or dark presentation.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" 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="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" 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 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                Dark</button>
-            </div>
-          </div>
-          <div class="mb-4 text-muted">
-            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Navigation position</label>
-            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar size</label>
-            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar position</label>
-            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-            </div>
-          </div>
-          <div>
-            <label class="form-label">Navigation color</label>
-            <div class="form-hint">Light or dark version of the sidebar </div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1582373134"></script>
-  <script>
-    (function() {
-    	var navbarPrimary = document.getElementById('navbar-primary'),
-    		navbarSecondary = document.getElementById('navbar-secondary');
-    	var defaults = {
-    		theme: 'light',
-    		'navbar-position': 'horizontal',
-    		'navbar-size': 'wide',
-    		'navbar-side': 'left',
-    		'navbar-color': 'light',
-    	};
-    	var eventsClean = {
-    		'theme': function () {
-    			document.body.classList.remove('theme-dark');
-    		},
-    		'navbar-position': function () {
-    			navbarPrimary.classList.remove('navbar-vertical');
-    			navbarSecondary.classList.remove('d-none');
-    		},
-    		'navbar-size': function () {
-    			navbarPrimary.classList.remove('navbar-vertical-narrow');
-    		},
-    		'navbar-side': function () {
-    			navbarPrimary.classList.remove('navbar-right');
-    		},
-    		'navbar-color': function () {
-    			navbarPrimary.classList.remove('navbar-dark');
-    			navbarPrimary.classList.add('navbar-light');
-    		},
-    	};
-    	var events = {
-    		'theme:light': function () {
-    		},
-    		'theme:dark': function () {
-    			document.body.classList.add('theme-dark');
-    		},
-    		'navbar-position:vertical': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    			navbarSecondary.classList.add('d-none');
-    		},
-    		'navbar-position:horizontal': function () {
-    		},
-    		'navbar-position:both': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    		},
-    		'navbar-size:wide': function () {
-    		},
-    		'navbar-size:narrow': function () {
-    			navbarPrimary.classList.add('navbar-vertical-narrow');
-    		},
-    		'navbar-side:left': function () {
-    		},
-    		'navbar-side:right': function () {
-    			navbarPrimary.classList.add('navbar-right');
-    		},
-    		'navbar-color:light': function () {
-    		},
-    		'navbar-color:dark': function () {
-    			navbarPrimary.classList.add('navbar-dark');
-    			navbarPrimary.classList.remove('navbar-light');
-    		},
-    	};
-    	var updateThemeConfig = function (name) {
-    		var key, value;
-    		if (name) {
-    			[key, value] = name.split(':');
-    			setConfig(key, value);
-    		}
-    		applyConfig();
-    	};
-    	var disableTransitions = function () {
-    		document.body.classList.add('no-transitions');
-    		setTimeout(function () {
-    			document.body.classList.remove('no-transitions');
-    		}, 300);
-    	};
-    	var getConfig = function () {
-    		var config = {};
-    		for (var key in defaults) {
-    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-    		}
-    		return config;
-    	};
-    	var setConfig = function (key, value) {
-    		localStorage.setItem('tabler-' + key, value);
-    	};
-    	var applyConfig = function () {
-    		disableTransitions();
-    		var config = getConfig();
-    		for (var key in config) {
-    			var value = config[key];
-    			eventsClean[key] && eventsClean[key].call();
-    			events[key + ':' + value] && events[key + ':' + value].call();
-    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-    				activeTrigger.classList.remove('active')
-    			});
-    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-    		}
-    	};
-    	applyConfig();
-    	for (var name in events) {
-    		var event = events[name];
-    		(function (event, name) {
-    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-    				updateThemeConfig(name);
-    				event.call();
-    				e.preventDefault();
-    				return false;
-    			});
-    		})(event, name);
-    	}
-    })();
-  </script>
-  <script>
-    document.body.style.display = "block"
-  </script>
-</body>
-</html>

demo/components/simple-card.html

@@ -1,815 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
-* @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"/>
-    <title>Simple box - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <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?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" 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?1582373134" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <div class="navbar-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
-            <ul class="navbar-nav">
-              <li class="nav-item">
-                <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Home</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Base</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
-                  <li >
-                    <a class="dropdown-item" href="../empty.html" >
-                      Empty page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blank.html" >
-                      Blank page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" 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="../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">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Extra</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
-                  <li >
-                    <a class="dropdown-item" href="../invoice.html" >
-                      Invoice
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blog.html" >
-                      Blog cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../snippets.html" >
-                      Snippets
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../search-results.html" >
-                      Search results
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../pricing.html" >
-                      Pricing cards
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Docs</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/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/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
-            </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <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>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
-            </div>
-          </div>
-        </div>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex">
-            <div class="input-icon w-100">
-              <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 form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <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>
-            </li>
-            <li class="nav-item dropdown pl-2">
-              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
-      <div class="content">
-        <div class="container">
-          <!-- Page title -->
-          <div class="page-header">
-            <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">
-                    <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 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>
-      </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-customize" tabindex="-1" role="dialog" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">Customize Tabler</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <svg xmlns="http://www.w3.org/2000/svg" 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="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-          </button>
-        </div>
-        <div class="modal-body">
-          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-          <div class="mb-3">
-            <label class="form-label">Color scheme</label>
-            <div class="form-hint">Light or dark presentation.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" 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="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" 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 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                Dark</button>
-            </div>
-          </div>
-          <div class="mb-4 text-muted">
-            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Navigation position</label>
-            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar size</label>
-            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar position</label>
-            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-            </div>
-          </div>
-          <div>
-            <label class="form-label">Navigation color</label>
-            <div class="form-hint">Light or dark version of the sidebar </div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1582373134"></script>
-  <script>
-    (function() {
-    	var navbarPrimary = document.getElementById('navbar-primary'),
-    		navbarSecondary = document.getElementById('navbar-secondary');
-    	var defaults = {
-    		theme: 'light',
-    		'navbar-position': 'horizontal',
-    		'navbar-size': 'wide',
-    		'navbar-side': 'left',
-    		'navbar-color': 'light',
-    	};
-    	var eventsClean = {
-    		'theme': function () {
-    			document.body.classList.remove('theme-dark');
-    		},
-    		'navbar-position': function () {
-    			navbarPrimary.classList.remove('navbar-vertical');
-    			navbarSecondary.classList.remove('d-none');
-    		},
-    		'navbar-size': function () {
-    			navbarPrimary.classList.remove('navbar-vertical-narrow');
-    		},
-    		'navbar-side': function () {
-    			navbarPrimary.classList.remove('navbar-right');
-    		},
-    		'navbar-color': function () {
-    			navbarPrimary.classList.remove('navbar-dark');
-    			navbarPrimary.classList.add('navbar-light');
-    		},
-    	};
-    	var events = {
-    		'theme:light': function () {
-    		},
-    		'theme:dark': function () {
-    			document.body.classList.add('theme-dark');
-    		},
-    		'navbar-position:vertical': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    			navbarSecondary.classList.add('d-none');
-    		},
-    		'navbar-position:horizontal': function () {
-    		},
-    		'navbar-position:both': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    		},
-    		'navbar-size:wide': function () {
-    		},
-    		'navbar-size:narrow': function () {
-    			navbarPrimary.classList.add('navbar-vertical-narrow');
-    		},
-    		'navbar-side:left': function () {
-    		},
-    		'navbar-side:right': function () {
-    			navbarPrimary.classList.add('navbar-right');
-    		},
-    		'navbar-color:light': function () {
-    		},
-    		'navbar-color:dark': function () {
-    			navbarPrimary.classList.add('navbar-dark');
-    			navbarPrimary.classList.remove('navbar-light');
-    		},
-    	};
-    	var updateThemeConfig = function (name) {
-    		var key, value;
-    		if (name) {
-    			[key, value] = name.split(':');
-    			setConfig(key, value);
-    		}
-    		applyConfig();
-    	};
-    	var disableTransitions = function () {
-    		document.body.classList.add('no-transitions');
-    		setTimeout(function () {
-    			document.body.classList.remove('no-transitions');
-    		}, 300);
-    	};
-    	var getConfig = function () {
-    		var config = {};
-    		for (var key in defaults) {
-    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-    		}
-    		return config;
-    	};
-    	var setConfig = function (key, value) {
-    		localStorage.setItem('tabler-' + key, value);
-    	};
-    	var applyConfig = function () {
-    		disableTransitions();
-    		var config = getConfig();
-    		for (var key in config) {
-    			var value = config[key];
-    			eventsClean[key] && eventsClean[key].call();
-    			events[key + ':' + value] && events[key + ':' + value].call();
-    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-    				activeTrigger.classList.remove('active')
-    			});
-    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-    		}
-    	};
-    	applyConfig();
-    	for (var name in events) {
-    		var event = events[name];
-    		(function (event, name) {
-    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-    				updateThemeConfig(name);
-    				event.call();
-    				e.preventDefault();
-    				return false;
-    			});
-    		})(event, name);
-    	}
-    })();
-  </script>
-  <script>
-    document.body.style.display = "block"
-  </script>
-</body>
-</html>

demo/components/widget-revenue.html

@@ -1,875 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
-* @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"/>
-    <title>Revenue chart - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <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?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" 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?1582373134" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <div class="navbar-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
-            <ul class="navbar-nav">
-              <li class="nav-item">
-                <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Home</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Base</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
-                  <li >
-                    <a class="dropdown-item" href="../empty.html" >
-                      Empty page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blank.html" >
-                      Blank page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" 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="../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">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Extra</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
-                  <li >
-                    <a class="dropdown-item" href="../invoice.html" >
-                      Invoice
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blog.html" >
-                      Blog cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../snippets.html" >
-                      Snippets
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../search-results.html" >
-                      Search results
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../pricing.html" >
-                      Pricing cards
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Docs</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/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/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
-            </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <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>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
-            </div>
-          </div>
-        </div>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex">
-            <div class="input-icon w-100">
-              <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 form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <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>
-            </li>
-            <li class="nav-item dropdown pl-2">
-              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
-      <div class="content">
-        <div class="container">
-          <!-- Page title -->
-          <div class="page-header">
-            <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 lh-1">
-                                <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">
-                    <div class="card">
-                      <div class="card-body">
-                        <div class="d-flex align-items-center">
-                          <div class="subheader">Revenue</div>
-                          <div class="ml-auto lh-1">
-                            <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 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 lh-1\">\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>
-      </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-customize" tabindex="-1" role="dialog" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">Customize Tabler</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <svg xmlns="http://www.w3.org/2000/svg" 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="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-          </button>
-        </div>
-        <div class="modal-body">
-          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-          <div class="mb-3">
-            <label class="form-label">Color scheme</label>
-            <div class="form-hint">Light or dark presentation.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" 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="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" 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 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                Dark</button>
-            </div>
-          </div>
-          <div class="mb-4 text-muted">
-            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Navigation position</label>
-            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar size</label>
-            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar position</label>
-            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-            </div>
-          </div>
-          <div>
-            <label class="form-label">Navigation color</label>
-            <div class="form-hint">Light or dark version of the sidebar </div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1582373134"></script>
-  <script>
-    (function() {
-    	var navbarPrimary = document.getElementById('navbar-primary'),
-    		navbarSecondary = document.getElementById('navbar-secondary');
-    	var defaults = {
-    		theme: 'light',
-    		'navbar-position': 'horizontal',
-    		'navbar-size': 'wide',
-    		'navbar-side': 'left',
-    		'navbar-color': 'light',
-    	};
-    	var eventsClean = {
-    		'theme': function () {
-    			document.body.classList.remove('theme-dark');
-    		},
-    		'navbar-position': function () {
-    			navbarPrimary.classList.remove('navbar-vertical');
-    			navbarSecondary.classList.remove('d-none');
-    		},
-    		'navbar-size': function () {
-    			navbarPrimary.classList.remove('navbar-vertical-narrow');
-    		},
-    		'navbar-side': function () {
-    			navbarPrimary.classList.remove('navbar-right');
-    		},
-    		'navbar-color': function () {
-    			navbarPrimary.classList.remove('navbar-dark');
-    			navbarPrimary.classList.add('navbar-light');
-    		},
-    	};
-    	var events = {
-    		'theme:light': function () {
-    		},
-    		'theme:dark': function () {
-    			document.body.classList.add('theme-dark');
-    		},
-    		'navbar-position:vertical': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    			navbarSecondary.classList.add('d-none');
-    		},
-    		'navbar-position:horizontal': function () {
-    		},
-    		'navbar-position:both': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    		},
-    		'navbar-size:wide': function () {
-    		},
-    		'navbar-size:narrow': function () {
-    			navbarPrimary.classList.add('navbar-vertical-narrow');
-    		},
-    		'navbar-side:left': function () {
-    		},
-    		'navbar-side:right': function () {
-    			navbarPrimary.classList.add('navbar-right');
-    		},
-    		'navbar-color:light': function () {
-    		},
-    		'navbar-color:dark': function () {
-    			navbarPrimary.classList.add('navbar-dark');
-    			navbarPrimary.classList.remove('navbar-light');
-    		},
-    	};
-    	var updateThemeConfig = function (name) {
-    		var key, value;
-    		if (name) {
-    			[key, value] = name.split(':');
-    			setConfig(key, value);
-    		}
-    		applyConfig();
-    	};
-    	var disableTransitions = function () {
-    		document.body.classList.add('no-transitions');
-    		setTimeout(function () {
-    			document.body.classList.remove('no-transitions');
-    		}, 300);
-    	};
-    	var getConfig = function () {
-    		var config = {};
-    		for (var key in defaults) {
-    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-    		}
-    		return config;
-    	};
-    	var setConfig = function (key, value) {
-    		localStorage.setItem('tabler-' + key, value);
-    	};
-    	var applyConfig = function () {
-    		disableTransitions();
-    		var config = getConfig();
-    		for (var key in config) {
-    			var value = config[key];
-    			eventsClean[key] && eventsClean[key].call();
-    			events[key + ':' + value] && events[key + ':' + value].call();
-    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-    				activeTrigger.classList.remove('active')
-    			});
-    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-    		}
-    	};
-    	applyConfig();
-    	for (var name in events) {
-    		var event = events[name];
-    		(function (event, name) {
-    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-    				updateThemeConfig(name);
-    				event.call();
-    				e.preventDefault();
-    				return false;
-    			});
-    		})(event, name);
-    	}
-    })();
-  </script>
-  <script>
-    document.body.style.display = "block"
-  </script>
-</body>
-</html>

demo/components/widget-sales.html

@@ -1,889 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
-* @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"/>
-    <title>Sales widget - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <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?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" 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?1582373134" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
-    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <div class="navbar-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
-            <ul class="navbar-nav">
-              <li class="nav-item">
-                <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Home</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Base</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
-                  <li >
-                    <a class="dropdown-item" href="../empty.html" >
-                      Empty page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blank.html" >
-                      Blank page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" 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="../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">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Extra</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
-                  <li >
-                    <a class="dropdown-item" href="../invoice.html" >
-                      Invoice
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../blog.html" >
-                      Blog cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../snippets.html" >
-                      Snippets
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../search-results.html" >
-                      Search results
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../pricing.html" >
-                      Pricing cards
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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>
-                  <span class="nav-link-title">Docs</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/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/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
-            </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <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>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
-            </div>
-          </div>
-        </div>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex">
-            <div class="input-icon w-100">
-              <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 form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" 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="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <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>
-            </li>
-            <li class="nav-item dropdown pl-2">
-              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </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-item-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>
-                  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-item-icon"><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>
-                  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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
-      <div class="content">
-        <div class="container">
-          <!-- Page title -->
-          <div class="page-header">
-            <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 lh-1">
-                                <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">
-                    <div class="card">
-                      <div class="card-body">
-                        <div class="d-flex align-items-center">
-                          <div class="subheader">Sales</div>
-                          <div class="ml-auto lh-1">
-                            <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 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 lh-1\">\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>
-      </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-customize" tabindex="-1" role="dialog" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">Customize Tabler</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <svg xmlns="http://www.w3.org/2000/svg" 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="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-          </button>
-        </div>
-        <div class="modal-body">
-          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-          <div class="mb-3">
-            <label class="form-label">Color scheme</label>
-            <div class="form-hint">Light or dark presentation.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" 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="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" 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 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                Dark</button>
-            </div>
-          </div>
-          <div class="mb-4 text-muted">
-            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Navigation position</label>
-            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar size</label>
-            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-            </div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Sidebar position</label>
-            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-            </div>
-          </div>
-          <div>
-            <label class="form-label">Navigation color</label>
-            <div class="form-hint">Light or dark version of the sidebar </div>
-            <div class="btn-group w-100">
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- Libs JS -->
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
-  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1582373134"></script>
-  <script>
-    (function() {
-    	var navbarPrimary = document.getElementById('navbar-primary'),
-    		navbarSecondary = document.getElementById('navbar-secondary');
-    	var defaults = {
-    		theme: 'light',
-    		'navbar-position': 'horizontal',
-    		'navbar-size': 'wide',
-    		'navbar-side': 'left',
-    		'navbar-color': 'light',
-    	};
-    	var eventsClean = {
-    		'theme': function () {
-    			document.body.classList.remove('theme-dark');
-    		},
-    		'navbar-position': function () {
-    			navbarPrimary.classList.remove('navbar-vertical');
-    			navbarSecondary.classList.remove('d-none');
-    		},
-    		'navbar-size': function () {
-    			navbarPrimary.classList.remove('navbar-vertical-narrow');
-    		},
-    		'navbar-side': function () {
-    			navbarPrimary.classList.remove('navbar-right');
-    		},
-    		'navbar-color': function () {
-    			navbarPrimary.classList.remove('navbar-dark');
-    			navbarPrimary.classList.add('navbar-light');
-    		},
-    	};
-    	var events = {
-    		'theme:light': function () {
-    		},
-    		'theme:dark': function () {
-    			document.body.classList.add('theme-dark');
-    		},
-    		'navbar-position:vertical': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    			navbarSecondary.classList.add('d-none');
-    		},
-    		'navbar-position:horizontal': function () {
-    		},
-    		'navbar-position:both': function () {
-    			navbarPrimary.classList.add('navbar-vertical');
-    		},
-    		'navbar-size:wide': function () {
-    		},
-    		'navbar-size:narrow': function () {
-    			navbarPrimary.classList.add('navbar-vertical-narrow');
-    		},
-    		'navbar-side:left': function () {
-    		},
-    		'navbar-side:right': function () {
-    			navbarPrimary.classList.add('navbar-right');
-    		},
-    		'navbar-color:light': function () {
-    		},
-    		'navbar-color:dark': function () {
-    			navbarPrimary.classList.add('navbar-dark');
-    			navbarPrimary.classList.remove('navbar-light');
-    		},
-    	};
-    	var updateThemeConfig = function (name) {
-    		var key, value;
-    		if (name) {
-    			[key, value] = name.split(':');
-    			setConfig(key, value);
-    		}
-    		applyConfig();
-    	};
-    	var disableTransitions = function () {
-    		document.body.classList.add('no-transitions');
-    		setTimeout(function () {
-    			document.body.classList.remove('no-transitions');
-    		}, 300);
-    	};
-    	var getConfig = function () {
-    		var config = {};
-    		for (var key in defaults) {
-    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-    		}
-    		return config;
-    	};
-    	var setConfig = function (key, value) {
-    		localStorage.setItem('tabler-' + key, value);
-    	};
-    	var applyConfig = function () {
-    		disableTransitions();
-    		var config = getConfig();
-    		for (var key in config) {
-    			var value = config[key];
-    			eventsClean[key] && eventsClean[key].call();
-    			events[key + ':' + value] && events[key + ':' + value].call();
-    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-    				activeTrigger.classList.remove('active')
-    			});
-    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-    		}
-    	};
-    	applyConfig();
-    	for (var name in events) {
-    		var event = events[name];
-    		(function (event, name) {
-    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-    				updateThemeConfig(name);
-    				event.call();
-    				e.preventDefault();
-    				return false;
-    			});
-    		})(event, name);
-    	}
-    })();
-  </script>
-  <script>
-    document.body.style.display = "block"
-  </script>
-</body>
-</html>

demo/dist/css/demo.css

@@ -1,19 +1,18 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
- * Copyright 2018-2020 The Tabler Authors
- * Copyright 2018-2020 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
-/**
-Dark mode
- */
+* Tabler v1.0.0-alpha.9 (https://tabler.io)
+* @version 1.0.0-alpha.9
+* @link https://tabler.io
+* Copyright 2018-2020 The Tabler Authors
+* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
 pre.highlight,
 .highlight pre {
   max-height: 30rem;
   margin: 1.5rem 0;
   overflow: auto;
-  font-size: 0.7333333em;
-  background: #354052;
+  font-size: 85.7142857%;
+  background: #232e3c;
   border-radius: 3px;
   color: #ffffff; }
   pre.highlight::-webkit-scrollbar,
@@ -31,8 +30,8 @@ pre.highlight,
     background: transparent; }
   pre.highlight:hover::-webkit-scrollbar-thumb,
   .highlight pre:hover::-webkit-scrollbar-thumb {
-    background: #cbcfd6;
-    background: #5d6675; }
+    background: #c4c8cf;
+    background: #4f5863; }
 
 .highlight .c, .highlight .c1 {
   color: #a0aec0; }
@@ -55,7 +54,7 @@ pre.highlight,
 .example {
   padding: 2rem;
   margin: 2rem 0;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid #e8e9ea;
   border-radius: 3px 3px 0 0;
   position: relative;
   min-height: 12rem;
@@ -69,12 +68,12 @@ pre.highlight,
     flex: 0 auto; }
 
 .example-content {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   flex: 1;
   max-width: 100%; }
 
 .example-bg {
-  background: #f5f7fb; }
+  background: #f1f4f8; }
 
 .example-code {
   margin: 2rem 0;
@@ -97,7 +96,7 @@ pre.highlight,
   max-width: 40rem; }
 
 .example-modal-backdrop {
-  background: #354052;
+  background: #232e3c;
   opacity: 0.24;
   position: absolute;
   width: 100%;
@@ -108,12 +107,12 @@ pre.highlight,
 
 @media not print {
   .theme-dark .example-code {
-    border: 1px solid rgba(134, 140, 151, 0.24);
+    border: 1px solid #e8e9ea;
     border-top: none; } }
 
 @media not print and (prefers-color-scheme: dark) {
   .theme-dark-auto .example-code {
-    border: 1px solid rgba(134, 140, 151, 0.24);
+    border: 1px solid #e8e9ea;
     border-top: none; } }
 
 .card-sponsor {
@@ -131,6 +130,21 @@ body.no-transitions * {
   list-style: none;
   padding-left: 1rem; }
 
-.toc-entry a {
-  color: #868c97; }
-/*# sourceMappingURL=demo.css.map */
+.dropdown-menu-demo {
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  top: 0;
+  margin-bottom: 1rem; }
+
+.demo-icon-preview {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0; }
+  .demo-icon-preview svg {
+    width: 100%;
+    height: auto;
+    stroke-width: 1.5;
+    max-width: 15rem;
+    margin: 0 auto;
+    display: block; }

demo/dist/css/demo.min.css

@@ -1,7 +1,9 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
- * 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:.7333333em;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(134,140,151,.24);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:.9375rem;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(134,140,151,.24);border-top:none}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto .example-code{border:1px solid rgba(134,140,151,.24);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:#868c97}
-/*# sourceMappingURL=demo.min.css.map */
+* Tabler v1.0.0-alpha.9 (https://tabler.io)
+* @version 1.0.0-alpha.9
+* @link https://tabler.io
+* Copyright 2018-2020 The Tabler Authors
+* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+.highlight pre,pre.highlight{max-height:30rem;margin:1.5rem 0;overflow:auto;font-size:85.7142857%;background:#232e3c;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:#c4c8cf;background:#4f5863}.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 #e8e9ea;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:#f1f4f8}.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:#232e3c;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 #e8e9ea;border-top:none}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto .example-code{border:1px solid #e8e9ea;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}.dropdown-menu-demo{display:inline-block;width:100%;position:relative;top:0;margin-bottom:1rem}.demo-icon-preview{position:-webkit-sticky;position:sticky;top:0}.demo-icon-preview svg{width:100%;height:auto;stroke-width:1.5;max-width:15rem;margin:0 auto;display:block}

demo/dist/css/tabler-flags.css

@@ -1,12 +1,11 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
- * Copyright 2018-2020 The Tabler Authors
- * Copyright 2018-2020 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
-/**
-Dark mode
- */
+* Tabler v1.0.0-alpha.9 (https://tabler.io)
+* @version 1.0.0-alpha.9
+* @link https://tabler.io
+* Copyright 2018-2020 The Tabler Authors
+* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
 .flag {
   position: relative;
   display: inline-block;
@@ -16,7 +15,7 @@ Dark mode
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid #e8e9ea;
   border-radius: 3px; }
 
 .flag-country-ad {
@@ -787,15 +786,22 @@ Dark mode
 .flag-country-un {
   background-image: url("../img/flags/un.svg"); }
 
-.flag-md {
+.flag-xs {
+  width: 1.6666625rem;
+  height: 1.25rem; }
+
+.flag-sm {
   width: 2.66666rem;
   height: 2rem; }
 
+.flag-md {
+  width: 4.9999875rem;
+  height: 3.75rem; }
+
 .flag-lg {
-  width: 3.99999rem;
-  height: 3rem; }
+  width: 6.66665rem;
+  height: 5rem; }
 
 .flag-xl {
-  width: 5.33332rem;
-  height: 4rem; }
-/*# sourceMappingURL=tabler-flags.css.map */
+  width: 9.33331rem;
+  height: 7rem; }

demo/dist/css/tabler-payments.css

@@ -1,12 +1,11 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
- * Copyright 2018-2020 The Tabler Authors
- * Copyright 2018-2020 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
-/**
-Dark mode
- */
+* Tabler v1.0.0-alpha.9 (https://tabler.io)
+* @version 1.0.0-alpha.9
+* @link https://tabler.io
+* Copyright 2018-2020 The Tabler Authors
+* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
 .payment {
   width: 3.33332rem;
   height: 2rem;
@@ -371,15 +370,22 @@ Dark mode
 .payment-provider-worldpay-dark {
   background-image: url("../img/payments/worldpay-dark.svg"); }
 
+.payment-xs {
+  width: 2.083325rem;
+  height: 1.25rem; }
+
 .payment-sm {
-  width: 2.49999rem;
-  height: 1.5rem; }
+  width: 3.33332rem;
+  height: 2rem; }
+
+.payment-md {
+  width: 6.249975rem;
+  height: 3.75rem; }
 
 .payment-lg {
-  width: 4.99998rem;
-  height: 3rem; }
+  width: 8.3333rem;
+  height: 5rem; }
 
 .payment-xl {
-  width: 6.66664rem;
-  height: 4rem; }
-/*# sourceMappingURL=tabler-payments.css.map */
+  width: 11.66662rem;
+  height: 7rem; }

demo/dist/libs/autosize/dist/autosize.min.js

@@ -1,6 +0,0 @@
-/*!
-	autosize 4.0.2
-	license: MIT
-	http://www.jacklmoore.com/autosize
-*/
-!function(e,t){if("function"==typeof define&&define.amd)define(["module","exports"],t);else if("undefined"!=typeof exports)t(module,exports);else{var n={exports:{}};t(n,n.exports),e.autosize=n.exports}}(this,function(e,t){"use strict";var n,o,p="function"==typeof Map?new Map:(n=[],o=[],{has:function(e){return-1<n.indexOf(e)},get:function(e){return o[n.indexOf(e)]},set:function(e,t){-1===n.indexOf(e)&&(n.push(e),o.push(t))},delete:function(e){var t=n.indexOf(e);-1<t&&(n.splice(t,1),o.splice(t,1))}}),c=function(e){return new Event(e,{bubbles:!0})};try{new Event("test")}catch(e){c=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t}}function r(r){if(r&&r.nodeName&&"TEXTAREA"===r.nodeName&&!p.has(r)){var e,n=null,o=null,i=null,d=function(){r.clientWidth!==o&&a()},l=function(t){window.removeEventListener("resize",d,!1),r.removeEventListener("input",a,!1),r.removeEventListener("keyup",a,!1),r.removeEventListener("autosize:destroy",l,!1),r.removeEventListener("autosize:update",a,!1),Object.keys(t).forEach(function(e){r.style[e]=t[e]}),p.delete(r)}.bind(r,{height:r.style.height,resize:r.style.resize,overflowY:r.style.overflowY,overflowX:r.style.overflowX,wordWrap:r.style.wordWrap});r.addEventListener("autosize:destroy",l,!1),"onpropertychange"in r&&"oninput"in r&&r.addEventListener("keyup",a,!1),window.addEventListener("resize",d,!1),r.addEventListener("input",a,!1),r.addEventListener("autosize:update",a,!1),r.style.overflowX="hidden",r.style.wordWrap="break-word",p.set(r,{destroy:l,update:a}),"vertical"===(e=window.getComputedStyle(r,null)).resize?r.style.resize="none":"both"===e.resize&&(r.style.resize="horizontal"),n="content-box"===e.boxSizing?-(parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)):parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth),isNaN(n)&&(n=0),a()}function s(e){var t=r.style.width;r.style.width="0px",r.offsetWidth,r.style.width=t,r.style.overflowY=e}function u(){if(0!==r.scrollHeight){var e=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push({node:e.parentNode,scrollTop:e.parentNode.scrollTop}),e=e.parentNode;return t}(r),t=document.documentElement&&document.documentElement.scrollTop;r.style.height="",r.style.height=r.scrollHeight+n+"px",o=r.clientWidth,e.forEach(function(e){e.node.scrollTop=e.scrollTop}),t&&(document.documentElement.scrollTop=t)}}function a(){u();var e=Math.round(parseFloat(r.style.height)),t=window.getComputedStyle(r,null),n="content-box"===t.boxSizing?Math.round(parseFloat(t.height)):r.offsetHeight;if(n<e?"hidden"===t.overflowY&&(s("scroll"),u(),n="content-box"===t.boxSizing?Math.round(parseFloat(window.getComputedStyle(r,null).height)):r.offsetHeight):"hidden"!==t.overflowY&&(s("hidden"),u(),n="content-box"===t.boxSizing?Math.round(parseFloat(window.getComputedStyle(r,null).height)):r.offsetHeight),i!==n){i=n;var o=c("autosize:resized");try{r.dispatchEvent(o)}catch(e){}}}}function i(e){var t=p.get(e);t&&t.destroy()}function d(e){var t=p.get(e);t&&t.update()}var l=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?((l=function(e){return e}).destroy=function(e){return e},l.update=function(e){return e}):((l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return r(e)}),e}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e},l.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],d),e}),t.default=l,e.exports=t.default});

demo/dist/libs/countup.js/dist/countUp.js

@@ -0,0 +1,248 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+// playground: stackblitz.com/edit/countup-typescript
+var CountUp = /** @class */ (function () {
+    function CountUp(target, endVal, options) {
+        var _this = this;
+        this.target = target;
+        this.endVal = endVal;
+        this.options = options;
+        this.version = '2.0.7';
+        this.defaults = {
+            startVal: 0,
+            decimalPlaces: 0,
+            duration: 2,
+            useEasing: true,
+            useGrouping: true,
+            smartEasingThreshold: 999,
+            smartEasingAmount: 333,
+            separator: ',',
+            decimal: '.',
+            prefix: '',
+            suffix: ''
+        };
+        this.finalEndVal = null; // for smart easing
+        this.useEasing = true;
+        this.countDown = false;
+        this.error = '';
+        this.startVal = 0;
+        this.paused = true;
+        this.count = function (timestamp) {
+            if (!_this.startTime) {
+                _this.startTime = timestamp;
+            }
+            var progress = timestamp - _this.startTime;
+            _this.remaining = _this.duration - progress;
+            // to ease or not to ease
+            if (_this.useEasing) {
+                if (_this.countDown) {
+                    _this.frameVal = _this.startVal - _this.easingFn(progress, 0, _this.startVal - _this.endVal, _this.duration);
+                }
+                else {
+                    _this.frameVal = _this.easingFn(progress, _this.startVal, _this.endVal - _this.startVal, _this.duration);
+                }
+            }
+            else {
+                if (_this.countDown) {
+                    _this.frameVal = _this.startVal - ((_this.startVal - _this.endVal) * (progress / _this.duration));
+                }
+                else {
+                    _this.frameVal = _this.startVal + (_this.endVal - _this.startVal) * (progress / _this.duration);
+                }
+            }
+            // don't go past endVal since progress can exceed duration in the last frame
+            if (_this.countDown) {
+                _this.frameVal = (_this.frameVal < _this.endVal) ? _this.endVal : _this.frameVal;
+            }
+            else {
+                _this.frameVal = (_this.frameVal > _this.endVal) ? _this.endVal : _this.frameVal;
+            }
+            // decimal
+            _this.frameVal = Number(_this.frameVal.toFixed(_this.options.decimalPlaces));
+            // format and print value
+            _this.printValue(_this.frameVal);
+            // whether to continue
+            if (progress < _this.duration) {
+                _this.rAF = requestAnimationFrame(_this.count);
+            }
+            else if (_this.finalEndVal !== null) {
+                // smart easing
+                _this.update(_this.finalEndVal);
+            }
+            else {
+                if (_this.callback) {
+                    _this.callback();
+                }
+            }
+        };
+        // default format and easing functions
+        this.formatNumber = function (num) {
+            var neg = (num < 0) ? '-' : '';
+            var result, x, x1, x2, x3;
+            result = Math.abs(num).toFixed(_this.options.decimalPlaces);
+            result += '';
+            x = result.split('.');
+            x1 = x[0];
+            x2 = x.length > 1 ? _this.options.decimal + x[1] : '';
+            if (_this.options.useGrouping) {
+                x3 = '';
+                for (var i = 0, len = x1.length; i < len; ++i) {
+                    if (i !== 0 && (i % 3) === 0) {
+                        x3 = _this.options.separator + x3;
+                    }
+                    x3 = x1[len - i - 1] + x3;
+                }
+                x1 = x3;
+            }
+            // optional numeral substitution
+            if (_this.options.numerals && _this.options.numerals.length) {
+                x1 = x1.replace(/[0-9]/g, function (w) { return _this.options.numerals[+w]; });
+                x2 = x2.replace(/[0-9]/g, function (w) { return _this.options.numerals[+w]; });
+            }
+            return neg + _this.options.prefix + x1 + x2 + _this.options.suffix;
+        };
+        this.easeOutExpo = function (t, b, c, d) {
+            return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
+        };
+        this.options = __assign(__assign({}, this.defaults), options);
+        this.formattingFn = (this.options.formattingFn) ?
+            this.options.formattingFn : this.formatNumber;
+        this.easingFn = (this.options.easingFn) ?
+            this.options.easingFn : this.easeOutExpo;
+        this.startVal = this.validateValue(this.options.startVal);
+        this.frameVal = this.startVal;
+        this.endVal = this.validateValue(endVal);
+        this.options.decimalPlaces = Math.max(0 || this.options.decimalPlaces);
+        this.resetDuration();
+        this.options.separator = String(this.options.separator);
+        this.useEasing = this.options.useEasing;
+        if (this.options.separator === '') {
+            this.options.useGrouping = false;
+        }
+        this.el = (typeof target === 'string') ? document.getElementById(target) : target;
+        if (this.el) {
+            this.printValue(this.startVal);
+        }
+        else {
+            this.error = '[CountUp] target is null or undefined';
+        }
+    }
+    // determines where easing starts and whether to count down or up
+    CountUp.prototype.determineDirectionAndSmartEasing = function () {
+        var end = (this.finalEndVal) ? this.finalEndVal : this.endVal;
+        this.countDown = (this.startVal > end);
+        var animateAmount = end - this.startVal;
+        if (Math.abs(animateAmount) > this.options.smartEasingThreshold) {
+            this.finalEndVal = end;
+            var up = (this.countDown) ? 1 : -1;
+            this.endVal = end + (up * this.options.smartEasingAmount);
+            this.duration = this.duration / 2;
+        }
+        else {
+            this.endVal = end;
+            this.finalEndVal = null;
+        }
+        if (this.finalEndVal) {
+            this.useEasing = false;
+        }
+        else {
+            this.useEasing = this.options.useEasing;
+        }
+    };
+    // start animation
+    CountUp.prototype.start = function (callback) {
+        if (this.error) {
+            return;
+        }
+        this.callback = callback;
+        if (this.duration > 0) {
+            this.determineDirectionAndSmartEasing();
+            this.paused = false;
+            this.rAF = requestAnimationFrame(this.count);
+        }
+        else {
+            this.printValue(this.endVal);
+        }
+    };
+    // pause/resume animation
+    CountUp.prototype.pauseResume = function () {
+        if (!this.paused) {
+            cancelAnimationFrame(this.rAF);
+        }
+        else {
+            this.startTime = null;
+            this.duration = this.remaining;
+            this.startVal = this.frameVal;
+            this.determineDirectionAndSmartEasing();
+            this.rAF = requestAnimationFrame(this.count);
+        }
+        this.paused = !this.paused;
+    };
+    // reset to startVal so animation can be run again
+    CountUp.prototype.reset = function () {
+        cancelAnimationFrame(this.rAF);
+        this.paused = true;
+        this.resetDuration();
+        this.startVal = this.validateValue(this.options.startVal);
+        this.frameVal = this.startVal;
+        this.printValue(this.startVal);
+    };
+    // pass a new endVal and start animation
+    CountUp.prototype.update = function (newEndVal) {
+        cancelAnimationFrame(this.rAF);
+        this.startTime = null;
+        this.endVal = this.validateValue(newEndVal);
+        if (this.endVal === this.frameVal) {
+            return;
+        }
+        this.startVal = this.frameVal;
+        if (!this.finalEndVal) {
+            this.resetDuration();
+        }
+        this.finalEndVal = null;
+        this.determineDirectionAndSmartEasing();
+        this.rAF = requestAnimationFrame(this.count);
+    };
+    CountUp.prototype.printValue = function (val) {
+        var result = this.formattingFn(val);
+        if (this.el.tagName === 'INPUT') {
+            var input = this.el;
+            input.value = result;
+        }
+        else if (this.el.tagName === 'text' || this.el.tagName === 'tspan') {
+            this.el.textContent = result;
+        }
+        else {
+            this.el.innerHTML = result;
+        }
+    };
+    CountUp.prototype.ensureNumber = function (n) {
+        return (typeof n === 'number' && !isNaN(n));
+    };
+    CountUp.prototype.validateValue = function (value) {
+        var newValue = Number(value);
+        if (!this.ensureNumber(newValue)) {
+            this.error = "[CountUp] invalid start or end value: " + value;
+            return null;
+        }
+        else {
+            return newValue;
+        }
+    };
+    CountUp.prototype.resetDuration = function () {
+        this.startTime = null;
+        this.duration = Number(this.options.duration) * 1000;
+        this.remaining = this.duration;
+    };
+    return CountUp;
+}());
+export { CountUp };

demo/dist/libs/flatpickr/dist/plugins/rangePlugin.js

@@ -1,146 +1,169 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-  typeof define === 'function' && define.amd ? define(factory) :
-  (global = global || self, global.rangePlugin = factory());
-}(this, function () { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = global || self, global.rangePlugin = factory());
+}(this, (function () { 'use strict';
 
-  function rangePlugin(config) {
-      if (config === void 0) { config = {}; }
-      return function (fp) {
-          var dateFormat = "", secondInput, _secondInputFocused, _prevDates;
-          var createSecondInput = function () {
-              if (config.input) {
-                  secondInput =
-                      config.input instanceof Element
-                          ? config.input
-                          : window.document.querySelector(config.input);
-                  if (!secondInput) {
-                      fp.config.errorHandler(new Error("Invalid input element specified"));
-                      return;
-                  }
-                  if (fp.config.wrap) {
-                      secondInput = secondInput.querySelector("[data-input]");
-                  }
-              }
-              else {
-                  secondInput = fp._input.cloneNode();
-                  secondInput.removeAttribute("id");
-                  secondInput._flatpickr = undefined;
-              }
-              if (secondInput.value) {
-                  var parsedDate = fp.parseDate(secondInput.value);
-                  if (parsedDate)
-                      fp.selectedDates.push(parsedDate);
-              }
-              secondInput.setAttribute("data-fp-omit", "");
-              fp._bind(secondInput, ["focus", "click"], function () {
-                  if (fp.selectedDates[1]) {
-                      fp.latestSelectedDateObj = fp.selectedDates[1];
-                      fp._setHoursFromDate(fp.selectedDates[1]);
-                      fp.jumpToDate(fp.selectedDates[1]);
-                  }
-                  _secondInputFocused = true;
-                  fp.isOpen = false;
-                  fp.open(undefined, config.position === "left" ? fp._input : secondInput);
-              });
-              fp._bind(fp._input, ["focus", "click"], function (e) {
-                  e.preventDefault();
-                  fp.isOpen = false;
-                  fp.open();
-              });
-              if (fp.config.allowInput)
-                  fp._bind(secondInput, "keydown", function (e) {
-                      if (e.key === "Enter") {
-                          fp.setDate([fp.selectedDates[0], secondInput.value], true, dateFormat);
-                          secondInput.click();
-                      }
-                  });
-              if (!config.input)
-                  fp._input.parentNode &&
-                      fp._input.parentNode.insertBefore(secondInput, fp._input.nextSibling);
-          };
-          var plugin = {
-              onParseConfig: function () {
-                  fp.config.mode = "range";
-                  dateFormat = fp.config.altInput
-                      ? fp.config.altFormat
-                      : fp.config.dateFormat;
-              },
-              onReady: function () {
-                  createSecondInput();
-                  fp.config.ignoredFocusElements.push(secondInput);
-                  if (fp.config.allowInput) {
-                      fp._input.removeAttribute("readonly");
-                      secondInput.removeAttribute("readonly");
-                  }
-                  else {
-                      secondInput.setAttribute("readonly", "readonly");
-                  }
-                  fp._bind(fp._input, "focus", function () {
-                      fp.latestSelectedDateObj = fp.selectedDates[0];
-                      fp._setHoursFromDate(fp.selectedDates[0]);
-                      _secondInputFocused = false;
-                      fp.jumpToDate(fp.selectedDates[0]);
-                  });
-                  if (fp.config.allowInput)
-                      fp._bind(fp._input, "keydown", function (e) {
-                          if (e.key === "Enter")
-                              fp.setDate([fp._input.value, fp.selectedDates[1]], true, dateFormat);
-                      });
-                  fp.setDate(fp.selectedDates, false);
-                  plugin.onValueUpdate(fp.selectedDates);
-                  fp.loadedPlugins.push("range");
-              },
-              onPreCalendarPosition: function () {
-                  if (_secondInputFocused) {
-                      fp._positionElement = secondInput;
-                      setTimeout(function () {
-                          fp._positionElement = fp._input;
-                      }, 0);
-                  }
-              },
-              onChange: function () {
-                  if (!fp.selectedDates.length) {
-                      setTimeout(function () {
-                          if (fp.selectedDates.length)
-                              return;
-                          secondInput.value = "";
-                          _prevDates = [];
-                      }, 10);
-                  }
-                  if (_secondInputFocused) {
-                      setTimeout(function () {
-                          secondInput.focus();
-                      }, 0);
-                  }
-              },
-              onDestroy: function () {
-                  if (!config.input)
-                      secondInput.parentNode &&
-                          secondInput.parentNode.removeChild(secondInput);
-              },
-              onValueUpdate: function (selDates) {
-                  var _a, _b, _c;
-                  if (!secondInput)
-                      return;
-                  _prevDates =
-                      !_prevDates || selDates.length >= _prevDates.length
-                          ? selDates.slice() : _prevDates;
-                  if (_prevDates.length > selDates.length) {
-                      var newSelectedDate = selDates[0];
-                      var newDates = _secondInputFocused
-                          ? [_prevDates[0], newSelectedDate]
-                          : [newSelectedDate, _prevDates[1]];
-                      fp.setDate(newDates, false);
-                      _prevDates = newDates.slice();
-                  }
-                  _a = fp.selectedDates.map(function (d) { return fp.formatDate(d, dateFormat); }), _b = _a[0], fp._input.value = _b === void 0 ? "" : _b, _c = _a[1], secondInput.value = _c === void 0 ? "" : _c;
-              }
-          };
-          return plugin;
-      };
-  }
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
 
-  return rangePlugin;
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
 
-}));
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+
+    function rangePlugin(config) {
+        if (config === void 0) { config = {}; }
+        return function (fp) {
+            var dateFormat = "", secondInput, _secondInputFocused, _prevDates;
+            var createSecondInput = function () {
+                if (config.input) {
+                    secondInput =
+                        config.input instanceof Element
+                            ? config.input
+                            : window.document.querySelector(config.input);
+                    if (!secondInput) {
+                        fp.config.errorHandler(new Error("Invalid input element specified"));
+                        return;
+                    }
+                    if (fp.config.wrap) {
+                        secondInput = secondInput.querySelector("[data-input]");
+                    }
+                }
+                else {
+                    secondInput = fp._input.cloneNode();
+                    secondInput.removeAttribute("id");
+                    secondInput._flatpickr = undefined;
+                }
+                if (secondInput.value) {
+                    var parsedDate = fp.parseDate(secondInput.value);
+                    if (parsedDate)
+                        fp.selectedDates.push(parsedDate);
+                }
+                secondInput.setAttribute("data-fp-omit", "");
+                fp._bind(secondInput, ["focus", "click"], function () {
+                    if (fp.selectedDates[1]) {
+                        fp.latestSelectedDateObj = fp.selectedDates[1];
+                        fp._setHoursFromDate(fp.selectedDates[1]);
+                        fp.jumpToDate(fp.selectedDates[1]);
+                    }
+                    _secondInputFocused = true;
+                    fp.isOpen = false;
+                    fp.open(undefined, config.position === "left" ? fp._input : secondInput);
+                });
+                fp._bind(fp._input, ["focus", "click"], function (e) {
+                    e.preventDefault();
+                    fp.isOpen = false;
+                    fp.open();
+                });
+                if (fp.config.allowInput)
+                    fp._bind(secondInput, "keydown", function (e) {
+                        if (e.key === "Enter") {
+                            fp.setDate([fp.selectedDates[0], secondInput.value], true, dateFormat);
+                            secondInput.click();
+                        }
+                    });
+                if (!config.input)
+                    fp._input.parentNode &&
+                        fp._input.parentNode.insertBefore(secondInput, fp._input.nextSibling);
+            };
+            var plugin = {
+                onParseConfig: function () {
+                    fp.config.mode = "range";
+                    dateFormat = fp.config.altInput
+                        ? fp.config.altFormat
+                        : fp.config.dateFormat;
+                },
+                onReady: function () {
+                    createSecondInput();
+                    fp.config.ignoredFocusElements.push(secondInput);
+                    if (fp.config.allowInput) {
+                        fp._input.removeAttribute("readonly");
+                        secondInput.removeAttribute("readonly");
+                    }
+                    else {
+                        secondInput.setAttribute("readonly", "readonly");
+                    }
+                    fp._bind(fp._input, "focus", function () {
+                        fp.latestSelectedDateObj = fp.selectedDates[0];
+                        fp._setHoursFromDate(fp.selectedDates[0]);
+                        _secondInputFocused = false;
+                        fp.jumpToDate(fp.selectedDates[0]);
+                    });
+                    if (fp.config.allowInput)
+                        fp._bind(fp._input, "keydown", function (e) {
+                            if (e.key === "Enter")
+                                fp.setDate([fp._input.value, fp.selectedDates[1]], true, dateFormat);
+                        });
+                    fp.setDate(fp.selectedDates, false);
+                    plugin.onValueUpdate(fp.selectedDates);
+                    fp.loadedPlugins.push("range");
+                },
+                onPreCalendarPosition: function () {
+                    if (_secondInputFocused) {
+                        fp._positionElement = secondInput;
+                        setTimeout(function () {
+                            fp._positionElement = fp._input;
+                        }, 0);
+                    }
+                },
+                onChange: function () {
+                    if (!fp.selectedDates.length) {
+                        setTimeout(function () {
+                            if (fp.selectedDates.length)
+                                return;
+                            secondInput.value = "";
+                            _prevDates = [];
+                        }, 10);
+                    }
+                    if (_secondInputFocused) {
+                        setTimeout(function () {
+                            secondInput.focus();
+                        }, 0);
+                    }
+                },
+                onDestroy: function () {
+                    if (!config.input)
+                        secondInput.parentNode &&
+                            secondInput.parentNode.removeChild(secondInput);
+                },
+                onValueUpdate: function (selDates) {
+                    var _a, _b, _c;
+                    if (!secondInput)
+                        return;
+                    _prevDates =
+                        !_prevDates || selDates.length >= _prevDates.length
+                            ? __spreadArrays(selDates) : _prevDates;
+                    if (_prevDates.length > selDates.length) {
+                        var newSelectedDate = selDates[0];
+                        var newDates = _secondInputFocused
+                            ? [_prevDates[0], newSelectedDate]
+                            : [newSelectedDate, _prevDates[1]];
+                        fp.setDate(newDates, false);
+                        _prevDates = __spreadArrays(newDates);
+                    }
+                    _a = fp.selectedDates.map(function (d) { return fp.formatDate(d, dateFormat); }), _b = _a[0], fp._input.value = _b === void 0 ? "" : _b, _c = _a[1], secondInput.value = _c === void 0 ? "" : _c;
+                },
+            };
+            return plugin;
+        };
+    }
+
+    return rangePlugin;
+
+})));

demo/dist/libs/fullcalendar/daygrid/main.min.css

@@ -1 +1 @@
-.fc-dayGridDay-view .fc-content-skeleton,.fc-dayGridWeek-view .fc-content-skeleton{padding-bottom:1em}.fc-dayGrid-view .fc-body .fc-row{min-height:4em}.fc-row.fc-rigid{overflow:hidden}.fc-row.fc-rigid .fc-content-skeleton{position:absolute;top:0;left:0;right:0}.fc-day-top.fc-other-month{opacity:.3}.fc-dayGrid-view .fc-day-number,.fc-dayGrid-view .fc-week-number{padding:2px}.fc-dayGrid-view th.fc-day-number,.fc-dayGrid-view th.fc-week-number{padding:0 2px}.fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number{float:right}.fc-rtl .fc-dayGrid-view .fc-day-top .fc-day-number{float:left}.fc-ltr .fc-dayGrid-view .fc-day-top .fc-week-number{float:left;border-radius:0 0 3px}.fc-rtl .fc-dayGrid-view .fc-day-top .fc-week-number{float:right;border-radius:0 0 0 3px}.fc-dayGrid-view .fc-day-top .fc-week-number{min-width:1.5em;text-align:center;background-color:#f2f2f2;color:grey}.fc-dayGrid-view td.fc-week-number{text-align:center}.fc-dayGrid-view td.fc-week-number>*{display:inline-block;min-width:1.25em}
+:root{--fc-daygrid-event-dot-width:8px}.fc .fc-popover{position:fixed;top:0;box-shadow:0 2px 6px rgba(0,0,0,.15)}.fc .fc-popover-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:3px 4px}.fc .fc-popover-title{margin:0 2px}.fc .fc-popover-close{cursor:pointer;opacity:.65;font-size:1.1em}.fc-theme-standard .fc-popover{border:1px solid #ddd;border:1px solid var(--fc-border-color,#ddd);background:var(--fc-page-bg-color,#fff)}.fc-theme-standard .fc-popover-header{background:rgba(208,208,208,.3);background:var(--fc-neutral-bg-color,rgba(208,208,208,.3))}.fc-daygrid-day-events:after,.fc-daygrid-day-events:before,.fc-daygrid-day-frame:after,.fc-daygrid-day-frame:before,.fc-daygrid-event-harness:after,.fc-daygrid-event-harness:before{content:"";clear:both;display:table}.fc .fc-daygrid-body{position:relative;z-index:1}.fc .fc-daygrid-day.fc-day-today{background-color:rgba(255,220,40,.15);background-color:var(--fc-today-bg-color,rgba(255,220,40,.15))}.fc .fc-daygrid-day-frame{position:relative;min-height:100%}.fc .fc-daygrid-day-top{display:flex;flex-direction:row-reverse}.fc .fc-day-other .fc-daygrid-day-top{opacity:.3}.fc .fc-daygrid-day-number{position:relative;z-index:4;padding:4px}.fc .fc-daygrid-day-events{margin-top:1px}.fc .fc-daygrid-body-balanced .fc-daygrid-day-events{position:absolute;left:0;right:0}.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events{position:relative;min-height:2em}.fc .fc-daygrid-body-natural .fc-daygrid-day-events{margin-bottom:1em}.fc .fc-daygrid-event-harness{position:relative}.fc .fc-daygrid-event-harness-abs{position:absolute;top:0;left:0;right:0}.fc .fc-daygrid-bg-harness{position:absolute;top:0;bottom:0}.fc .fc-daygrid-day-bg .fc-non-business{z-index:1}.fc .fc-daygrid-day-bg .fc-bg-event{z-index:2}.fc .fc-daygrid-day-bg .fc-highlight{z-index:3}.fc .fc-daygrid-event{z-index:6;margin-top:1px}.fc .fc-daygrid-event.fc-event-mirror{z-index:7}.fc .fc-daygrid-day-bottom{font-size:.85em;margin:2px 3px 0}.fc .fc-daygrid-more-link{position:relative;z-index:4;cursor:pointer}.fc .fc-daygrid-week-number{position:absolute;z-index:5;top:0;padding:2px;min-width:1.5em;text-align:center;background-color:rgba(208,208,208,.3);background-color:var(--fc-neutral-bg-color,rgba(208,208,208,.3));color:grey;color:var(--fc-neutral-text-color,grey)}.fc .fc-more-popover{z-index:8}.fc .fc-more-popover .fc-popover-body{min-width:220px;padding:10px}.fc-direction-ltr .fc-daygrid-event.fc-event-start,.fc-direction-rtl .fc-daygrid-event.fc-event-end{margin-left:2px}.fc-direction-ltr .fc-daygrid-event.fc-event-end,.fc-direction-rtl .fc-daygrid-event.fc-event-start{margin-right:2px}.fc-direction-ltr .fc-daygrid-week-number{left:0;border-radius:0 0 3px}.fc-direction-rtl .fc-daygrid-week-number{right:0;border-radius:0 0 0 3px}.fc-liquid-hack .fc-daygrid-day-frame{position:static}.fc-daygrid-event{position:relative;white-space:nowrap;border-radius:3px;font-size:.85em;font-size:var(--fc-small-font-size,.85em)}.fc-daygrid-block-event .fc-event-time{font-weight:700}.fc-daygrid-block-event .fc-event-time,.fc-daygrid-block-event .fc-event-title{padding:1px}.fc-daygrid-dot-event{display:flex;align-items:center;padding:2px 0}.fc-daygrid-dot-event .fc-event-title{flex-grow:1;flex-shrink:1;min-width:0;overflow:hidden;font-weight:700}.fc-daygrid-dot-event.fc-event-mirror,.fc-daygrid-dot-event:hover{background:rgba(0,0,0,.1)}.fc-daygrid-dot-event.fc-event-selected:before{top:-10px;bottom:-10px}.fc-daygrid-event-dot{margin:0 4px;box-sizing:content-box;width:0;height:0;border:4px solid #3788d8;border:calc(var(--fc-daygrid-event-dot-width,8px)/ 2) solid var(--fc-event-border-color,#3788d8);border-radius:4px;border-radius:calc(var(--fc-daygrid-event-dot-width,8px)/ 2)}.fc-direction-ltr .fc-daygrid-event .fc-event-time{margin-right:3px}.fc-direction-rtl .fc-daygrid-event .fc-event-time{margin-left:3px}

demo/dist/libs/fullcalendar/list/main.min.css

@@ -1 +1 @@
-.fc-event-dot{display:inline-block;width:10px;height:10px;border-radius:5px}.fc-rtl .fc-list-view{direction:rtl}.fc-list-view{border-width:1px;border-style:solid}.fc .fc-list-table{table-layout:auto}.fc-list-table td{border-width:1px 0 0;padding:8px 14px}.fc-list-table tr:first-child td{border-top-width:0}.fc-list-heading{border-bottom-width:1px}.fc-list-heading td{font-weight:700}.fc-ltr .fc-list-heading-main{float:left}.fc-ltr .fc-list-heading-alt,.fc-rtl .fc-list-heading-main{float:right}.fc-rtl .fc-list-heading-alt{float:left}.fc-list-item.fc-has-url{cursor:pointer}.fc-list-item-marker,.fc-list-item-time{white-space:nowrap;width:1px}.fc-ltr .fc-list-item-marker{padding-right:0}.fc-rtl .fc-list-item-marker{padding-left:0}.fc-list-item-title a{text-decoration:none;color:inherit}.fc-list-item-title a[href]:hover{text-decoration:underline}.fc-list-empty-wrap2{position:absolute;top:0;left:0;right:0;bottom:0}.fc-list-empty-wrap1{width:100%;height:100%;display:table}.fc-list-empty{display:table-cell;vertical-align:middle;text-align:center}.fc-unthemed .fc-list-empty{background-color:#eee}
+:root{--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5}.fc-theme-standard .fc-list{border:1px solid #ddd;border:1px solid var(--fc-border-color,#ddd)}.fc .fc-list-empty{background-color:rgba(208,208,208,.3);background-color:var(--fc-neutral-bg-color,rgba(208,208,208,.3));height:100%;display:flex;justify-content:center;align-items:center}.fc .fc-list-empty-cushion{margin:5em 0}.fc .fc-list-table{width:100%;border-style:hidden}.fc .fc-list-table tr>*{border-left:0;border-right:0}.fc .fc-list-sticky .fc-list-day>*{position:-webkit-sticky;position:sticky;top:0;background:var(--fc-page-bg-color,#fff)}.fc .fc-list-table th{padding:0}.fc .fc-list-day-cushion,.fc .fc-list-table td{padding:8px 14px}.fc .fc-list-day-cushion:after{content:"";clear:both;display:table}.fc-theme-standard .fc-list-day-cushion{background-color:rgba(208,208,208,.3);background-color:var(--fc-neutral-bg-color,rgba(208,208,208,.3))}.fc-direction-ltr .fc-list-day-text,.fc-direction-rtl .fc-list-day-side-text{float:left}.fc-direction-ltr .fc-list-day-side-text,.fc-direction-rtl .fc-list-day-text{float:right}.fc-direction-ltr .fc-list-table .fc-list-event-graphic{padding-right:0}.fc-direction-rtl .fc-list-table .fc-list-event-graphic{padding-left:0}.fc .fc-list-event.fc-event-forced-url{cursor:pointer}.fc .fc-list-event:hover td{background-color:#f5f5f5;background-color:var(--fc-list-event-hover-bg-color,#f5f5f5)}.fc .fc-list-event-graphic,.fc .fc-list-event-time{white-space:nowrap;width:1px}.fc .fc-list-event-dot{display:inline-block;box-sizing:content-box;width:0;height:0;border:5px solid #3788d8;border:calc(var(--fc-list-event-dot-width,10px)/ 2) solid var(--fc-event-border-color,#3788d8);border-radius:5px;border-radius:calc(var(--fc-list-event-dot-width,10px)/ 2)}.fc .fc-list-event-title a{color:inherit;text-decoration:none}.fc .fc-list-event.fc-event-forced-url:hover a{text-decoration:underline}

demo/dist/libs/nouislider/distribute/nouislider.min.css

@@ -1,2 +1,2 @@
-/*! nouislider - 14.1.1 - 12/15/2019 */
-.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%}
+/*! nouislider - 14.6.2 - 9/16/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%}.noUi-horizontal .noUi-origin>.noUi-tooltip{-webkit-transform:translate(50%,0);transform:translate(50%,0);left:auto;bottom:10px}.noUi-vertical .noUi-origin>.noUi-tooltip{-webkit-transform:translate(0,-18px);transform:translate(0,-18px);top:auto;right:28px}