Release 1.0.0-alpha.14

add readme npm and CDN installation guide

.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,6 @@ node_modules/
 /svg-tmp/
 /components/
 /percy.sh
+/Gemfile.lock
+/package-lock.json
+/src/pages/playground.html

.gitpod.yml

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

.percy.yml

@@ -0,0 +1,3 @@
+version: 1
+snapshot:
+  widths: [1440]

Gemfile

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

README.md

@@ -2,17 +2,14 @@
 
 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.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="Backers 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/core.svg" alt="Latest Release"></a>
 
 
 ## Features
@@ -54,7 +51,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**:
@@ -76,6 +73,29 @@ Once you complete the setup, you'll be able to run the various commands provided
 Run `npm run build` for reforms a one off build application without refresh.
 Open [http://localhost:3001](http://localhost:3001) to configure the Web server.
 
+## Installation
+
+Tabler is distributed via npm.
+
+```sh
+npm install --save @tabler/core
+```
+
+### CDN support
+
+All files included in `@tabler/core` npm package are available over a CDN.
+
+#### Javascript
+
+```html
+<script src="https://unpkg.com/@tabler/core@latest/dist/js/tabler.min.js"></script>
+```
+
+#### Styles
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@tabler/core@latest/dist/css/tabler.min.css">
+```
 
 ## Feature requests
 

_config.yml

@@ -1,21 +1,32 @@
-source: pages
+source: src/pages
 destination: tmp
 
-version: 1.0.0-alpha.4
+keep_files:
+  - css
+  - js
+  - img
+  - dist
+  - static
+  - playground.html
+
+use-iconfont: false
+
 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
+preview-url: https://preview.tabler.io
 
 mapbox_key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
 
 debug: false
 
-dark-theme: false
+layout-dark: false
 
 plugins:
   - jekyll-random
-  - jekyll-toc
   - jekyll-tidy
   - jekyll-timeago
   - jekyll-redirect-from
@@ -23,15 +34,11 @@ plugins:
 tabler-plugins:
   - tabler-flags
   - tabler-payments
-  - tabler-buttons
+  - tabler-vendors
 
 exclude:
   - .jekyll-cache
-
-keep_files:
-  - css/ui-kit.css
-  - css/dark.css
-  - css/rtl.css
+  - redirects.json
 
 markdown: kramdown
 kramdown:
@@ -42,18 +49,9 @@ jekyll_tidy:
   compress_html: false
   ignore_env: development
 
-toc:
-  min_level: 2
-  max_level: 3
-  list_class: list-unstyled
-
 collections:
   docs:
     output: true
-  changelog:
-    output: false
-  components:
-    output: true
 
 defaults:
   - scope:
@@ -70,12 +68,6 @@ defaults:
       type: "docs"
     values:
       layout: docs
-      toc: true
-  - scope:
-      type: "components"
-    values:
-      layout: component
-
 
 colors:
   blue:
@@ -114,9 +106,6 @@ colors:
   cyan:
     hex: '#17a2b8'
     title: Cyan
-  gray:
-    hex: '#868e96'
-    title: Gray
 
 colors-extra:
   white:
@@ -125,16 +114,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 +153,6 @@ button-variants:
   dark:
     class: dark
     title: Dark
-  link:
-    class: link
-    title: Link
 
 button-states:
   - class:
@@ -175,47 +164,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/404.html

@@ -1,11 +1,11 @@
 <!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)
+* @version 1.0.0-alpha.14
+* @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>
@@ -13,34 +13,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>Page 404 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <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"/>
+    <!-- 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/tabler-vendors.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
       	display: none;
@@ -51,16 +29,14 @@
     <div class="flex-fill d-flex align-items-center justify-content-center">
       <div class="container-tight py-6">
         <div class="empty">
-          <div class="empty-icon">
-            <div class="display-4">404</div>
-          </div>
-          <p class="empty-title h3">Oops… You just found an error page</p>
+          <div class="empty-header">404</div>
+          <p class="empty-title">Oops… You just found an error page</p>
           <p class="empty-subtitle text-muted">
             We are sorry but the page you are looking for was not found
           </p>
           <div class="empty-action">
             <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="5" y1="12" x2="19" y2="12" /><line x1="5" y1="12" x2="11" y2="18" /><line x1="5" y1="12" x2="11" y2="6" /></svg>
               Take me home
             </a>
           </div>
@@ -68,10 +44,9 @@
       </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>
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1582373134"></script>
+    <script src="./dist/js/tabler.min.js"></script>
     <script>
       document.body.style.display = "block"
     </script>

demo/500.html

@@ -1,11 +1,11 @@
 <!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)
+* @version 1.0.0-alpha.14
+* @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>
@@ -13,34 +13,12 @@
     <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"/>
+    <!-- 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/tabler-vendors.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
       	display: none;
@@ -51,16 +29,14 @@
     <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>
+          <div class="empty-header">500</div>
+          <p class="empty-title">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>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="5" y1="12" x2="19" y2="12" /><line x1="5" y1="12" x2="11" y2="18" /><line x1="5" y1="12" x2="11" y2="6" /></svg>
               Take me home
             </a>
           </div>
@@ -68,10 +44,9 @@
       </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>
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1582373134"></script>
+    <script src="./dist/js/tabler.min.js"></script>
     <script>
       document.body.style.display = "block"
     </script>

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/activity.html

@@ -0,0 +1,622 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.14
+* @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>Activity - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- 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/tabler-vendors.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 d-print-none">
+        <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 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>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html" >
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./blank.html" >
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html" >
+                          Buttons
+                        </a>
+                        <a class="dropdown-item" href="./cards.html" >
+                          Cards
+                        </a>
+                        <a class="dropdown-item" href="./cards-masonry.html" >
+                          Cards Masonry
+                        </a>
+                        <a class="dropdown-item" href="./dropdowns.html" >
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="./icons.html" >
+                          Icons
+                        </a>
+                        <a class="dropdown-item" href="./modals.html" >
+                          Modals
+                        </a>
+                        <a class="dropdown-item" href="./maps.html" >
+                          Maps
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html" >
+                          Vector maps
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html" >
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./charts.html" >
+                          Charts
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./charts-heatmap.html" >
+                          Charts heatmap
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html" >
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./skeleton.html" >
+                          Skeleton
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html" >
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tables.html" >
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./calendar.html" >
+                          Calendar
+                        </a>
+                        <a class="dropdown-item" href="./carousel.html" >
+                          Carousel
+                        </a>
+                        <a class="dropdown-item" href="./lists.html" >
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./typography.html" >
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html" >
+                          Markdown
+                        </a>
+                        <div 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>
+                            <a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
+                          </div>
+                        </div>
+                        <div 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>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </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>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./activity.html" >
+                      Activity
+                    </a>
+                    <a class="dropdown-item" href="./gallery.html" >
+                      Gallery
+                    </a>
+                    <a class="dropdown-item" href="./invoice.html" >
+                      Invoice
+                    </a>
+                    <a class="dropdown-item" href="./search-results.html" >
+                      Search results
+                    </a>
+                    <a class="dropdown-item" href="./pricing.html" >
+                      Pricing cards
+                    </a>
+                    <a class="dropdown-item" href="./users.html" >
+                      Users
+                    </a>
+                    <a class="dropdown-item" href="./license.html" >
+                      License
+                    </a>
+                    <a class="dropdown-item" href="./music.html" >
+                      Music
+                    </a>
+                    <a class="dropdown-item" href="./widgets.html" >
+                      Widgets
+                    </a>
+                    <a class="dropdown-item" href="./wizard.html" >
+                      Wizard
+                    </a>
+                  </div>
+                </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>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html" >
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html" >
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html" >
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html" >
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed-dark.html" >
+                          Condensed dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html" >
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html" >
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-dark.html" >
+                          Dark mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html" >
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html" >
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./docs/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"/><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">
+                      Documentation
+                    </span>
+                  </a>
+                </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 d-print-none">
+            <div class="row align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Activity
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row justify-content-center">
+            <div class="col-8">
+              <div class="card">
+                <div class="card-body">
+                  <div class="divide-y-4">
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar">JL</span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Jeffie Lewzey</strong> commented on your <strong>"I'm not a witch."</strong> post.
+                          </div>
+                          <div class="text-muted">yesterday</div>
+                        </div>
+                        <div class="col-auto align-self-center">
+                          <div class="badge bg-primary"></div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/002m.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            It's <strong>Mallory Hulme</strong>'s birthday. Wish him well!
+                          </div>
+                          <div class="text-muted">2 days ago</div>
+                        </div>
+                        <div class="col-auto align-self-center">
+                          <div class="badge bg-primary"></div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/003m.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Dunn Slane</strong> posted <strong>"Well, what do you want?"</strong>.
+                          </div>
+                          <div class="text-muted">today</div>
+                        </div>
+                        <div class="col-auto align-self-center">
+                          <div class="badge bg-primary"></div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/000f.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Emmy Levet</strong> created a new project <strong>Morning alarm clock</strong>.
+                          </div>
+                          <div class="text-muted">4 days ago</div>
+                        </div>
+                        <div class="col-auto align-self-center">
+                          <div class="badge bg-primary"></div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/001f.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Maryjo Lebarree</strong> liked your photo.
+                          </div>
+                          <div class="text-muted">2 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar">EP</span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Egan Poetz</strong> registered new client as <strong>Trilia</strong>.
+                          </div>
+                          <div class="text-muted">yesterday</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/002f.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Kellie Skingley</strong> closed a new deal on project <strong>Pen Pineapple Apple Pen</strong>.
+                          </div>
+                          <div class="text-muted">2 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/003f.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Christabel Charlwood</strong> created a new project for <strong>Wikibox</strong>.
+                          </div>
+                          <div class="text-muted">4 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar">HS</span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Haskel Shelper</strong> change status of <strong>Tabler Icons</strong> from <strong>open</strong> to <strong>closed</strong>.
+                          </div>
+                          <div class="text-muted">today</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/006m.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Lorry Mion</strong> liked <strong>Tabler UI Kit</strong>.
+                          </div>
+                          <div class="text-muted">yesterday</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Leesa Beaty</strong> posted new video.
+                          </div>
+                          <div class="text-muted">2 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/007m.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Perren Keemar</strong> and 3 others followed you.
+                          </div>
+                          <div class="text-muted">2 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar">SA</span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Sunny Airey</strong> upload 3 new photos to category <strong>Inspirations</strong>.
+                          </div>
+                          <div class="text-muted">2 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/009m.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Geoffry Flaunders</strong> made a <strong>$10</strong> donation.
+                          </div>
+                          <div class="text-muted">2 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/010m.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Thatcher Keel</strong> created a profile.
+                          </div>
+                          <div class="text-muted">3 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/005f.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Dyann Escala</strong> hosted the event <strong>Tabler UI Birthday</strong>.
+                          </div>
+                          <div class="text-muted">4 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/006f.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Avivah Mugleston</strong> mentioned you on <strong>Best of 2020</strong>.
+                          </div>
+                          <div class="text-muted">2 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar">AA</span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Arlie Armstead</strong> sent a Review Request to <strong>Amanda Blake</strong>.
+                          </div>
+                          <div class="text-muted">2 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <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="./license.html" class="link-secondary">License</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="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js"></script>
+    <script>
+      document.body.style.display = "block"
+    </script>
+  </body>
+</html>

demo/auth-lock.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.14
+* @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>Forgot password - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- 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/tabler-vendors.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased border-top-wide border-primary d-flex flex-column">
+    <div class="flex-fill d-flex flex-column justify-content-center py-4">
+      <div class="container-tight py-6">
+        <div class="text-center mb-4">
+          <a href="."><img src="./static/logo.svg" height="36" alt=""></a>
+        </div>
+        <form class="card card-md" action="." method="get" autocomplete="off">
+          <div class="card-body text-center">
+            <div class="mb-4">
+              <h2 class="card-title">Account Locked</h2>
+              <p class="text-muted">Please enter your password to unlock your account</p>
+            </div>
+            <div class="mb-4">
+              <span class="avatar avatar-xl mb-3" style="background-image: url(./static/avatars/000m.jpg)"></span>
+              <h3>Paweł Kuna</h3>
+            </div>
+            <div class="mb-4">
+              <input type="password" class="form-control" placeholder="Password&hellip;">
+            </div>
+            <div>
+              <a href="#" class="btn btn-primary w-100">
+                <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="5" y="11" width="14" height="10" rx="2" /><circle cx="12" cy="16" r="1" /><path d="M8 11v-5a4 4 0 0 1 8 0" /></svg>
+                Unlock
+              </a>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js"></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/calendar.html

@@ -1,932 +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>Calendar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <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 active">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" 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"><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 active" 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">
-                  Calendar
-                </h2>
-              </div>
-              <!-- Page title actions -->
-              <div class="col-auto ml-auto d-print-none">
-                <div class="d-flex">
-                  <a href="#" class="btn btn-primary">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                    Add event
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="card">
-            <div class="card-body">
-              <div id="calendar-main" class="card-calendar"></div>
-            </div>
-          </div>
-        </div>
-        <footer class="footer footer-transparent">
-          <div class="container">
-            <div class="row text-center align-items-center flex-row-reverse">
-              <div class="col-lg-auto ml-lg-auto">
-                <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
-                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
-                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
-                </ul>
-              </div>
-              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
-                Copyright © 2020
-                <a href="." class="link-secondary">Tabler</a>.
-                All rights reserved.
-              </div>
-            </div>
-          </div>
-        </footer>
-      </div>
-    </div>
-    <div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog modal-lg" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">New report</h5>
-            <button type="button" class="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">
-            <div class="mb-3">
-              <label class="form-label">Name</label>
-              <input type="text" class="form-control" name="example-text-input" placeholder="Your report name">
-            </div>
-            <label class="form-label">Report type</label>
-            <div class="form-selectgroup-boxes row mb-3">
-              <div class="col-lg-6">
-                <label class="form-selectgroup-item">
-                  <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked>
-                  <div class="form-selectgroup-box d-flex align-items-center p-3">
-                    <div class="mr-3">
-                      <span class="form-selectgroup-check"></span>
-                    </div>
-                    <div class="form-selectgroup-box-content">
-                      <div class="form-selectgroup-title strong mb-1">Simple</div>
-                      <div class="text-muted">Provide only basic data needed for the report</div>
-                    </div>
-                  </div>
-                </label>
-              </div>
-              <div class="col-lg-6">
-                <label class="form-selectgroup-item">
-                  <input type="radio" name="report-type" value="1" class="form-selectgroup-input">
-                  <div class="form-selectgroup-box d-flex align-items-center p-3">
-                    <div class="mr-3">
-                      <span class="form-selectgroup-check"></span>
-                    </div>
-                    <div class="form-selectgroup-box-content">
-                      <div class="form-selectgroup-title strong mb-1">Advanced</div>
-                      <div class="text-muted">Insert charts and additional advanced analyses to be inserted in the report</div>
-                    </div>
-                  </div>
-                </label>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-lg-8">
-                <div class="mb-3">
-                  <label class="form-label">Report url</label>
-                  <div class="input-group input-group-flat">
-                    <div class="input-group-prepend">
-                      <span class="input-group-text">
-                        https://tabler.io/reports/
-                      </span>
-                    </div>
-                    <input type="text" class="form-control pl-0"  value="report-01">
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-4">
-                <div class="mb-3">
-                  <label class="form-label">Visibility</label>
-                  <select class="form-select">
-                    <option value="1" selected>Private</option>
-                    <option value="2">Public</option>
-                    <option value="3">Hidden</option>
-                  </select>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="modal-body">
-            <div class="row">
-              <div class="col-lg-6">
-                <div class="mb-3">
-                  <label class="form-label">Client name</label>
-                  <input type="text" class="form-control">
-                </div>
-              </div>
-              <div class="col-lg-6">
-                <div class="mb-3">
-                  <label class="form-label">Reporting period</label>
-                  <input type="date" class="form-control">
-                </div>
-              </div>
-              <div class="col-lg-12">
-                <div>
-                  <label class="form-label">Additional information</label>
-                  <textarea class="form-control" rows="3"></textarea>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="modal-footer">
-            <a href="#" class="btn btn-link link-secondary" data-dismiss="modal">
-              Cancel
-            </a>
-            <a href="#" class="btn btn-primary ml-auto" data-dismiss="modal">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-              Create new report
-            </a>
-          </div>
-        </div>
-      </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>
-    <script src="./dist/libs/fullcalendar/core/main.min.js?1582373134"></script>
-    <script src="./dist/libs/fullcalendar/daygrid/main.min.js?1582373134"></script>
-    <script src="./dist/libs/fullcalendar/interaction/main.min.js?1582373134"></script>
-    <script src="./dist/libs/fullcalendar/timegrid/main.min.js?1582373134"></script>
-    <script src="./dist/libs/fullcalendar/list/main.min.js?1582373134"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1582373134"></script>
-    <script>
-      document.addEventListener('DOMContentLoaded', function () {
-            var calendarEl = document.getElementById('calendar-main'),
-               today = new Date(),
-               y = today.getFullYear(),
-               m = today.getMonth(),
-               d = today.getDate();
-            window.FullCalendar && (new FullCalendar.Calendar(calendarEl, {
-      	   plugins: [ 'interaction', 'dayGrid' ],
-               themeSystem: 'standard',
-      	   header: {
-      		   left: 'title',
-      		   center: '',
-      		   right: 'prev,next'
-      	   },
-      	   selectable: true,
-      	   selectHelper: true,
-      	   nowIndicator: true,
-      	   views: {
-      		   dayGridMonth: { buttonText: 'month' },
-      		   timeGridWeek: { buttonText: 'week' },
-      		   timeGridDay: { buttonText: 'day' }
-      	   },
-      	   defaultView: 'dayGridMonth',
-      	   timeFormat: 'H(:mm)',
-      	   events: [
-      	   	{
-                     title: 'All Day Event',
-                     start: new Date(y, m, 1),
-      			   className: 'bg-blue-lt'
-                  },
-                  {
-                     id: 999,
-                     title: 'Repeating Event',
-                     start: new Date(y, m, 7, 6, 0),
-                     allDay: false,
-                     className: 'bg-blue-lt'
-                  },
-                  {
-                     id: 999,
-                     title: 'Repeating Event',
-                     start: new Date(y, m, 14, 6, 0),
-                     allDay: false,
-                     className: 'bg-lime-lt'
-                  },
-                  {
-                     title: 'Meeting',
-                     start: new Date(y, m, 4, 10, 30),
-                     allDay: false,
-                     className: 'bg-green-lt'
-                  },
-                  {
-                     title: 'Lunch',
-                     start: new Date(y, m, 5, 12, 0),
-                     end: new Date(y, m, 5, 14, 0),
-                     allDay: false,
-                     className: 'bg-red-lt'
-                  },
-                  {
-                     title: 'LBD Launch',
-                     start: new Date(y, m, 19, 12, 0),
-                     allDay: true,
-                     className: 'bg-azure-lt'
-                  },
-                  {
-                     title: 'Birthday Party',
-                     start: new Date(y, m, 16, 19, 0),
-                     end: new Date(y, m, 16, 22, 30),
-                     allDay: false,
-      		      className: 'bg-orange-lt'
-                  }
-               ]
-         })).render();
-      });
-    </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,614 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.14
+* @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>
+    <!-- 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/tabler-vendors.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 d-print-none">
+        <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>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html" >
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./blank.html" >
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html" >
+                          Buttons
+                        </a>
+                        <a class="dropdown-item" href="./cards.html" >
+                          Cards
+                        </a>
+                        <a class="dropdown-item active" href="./cards-masonry.html" >
+                          Cards Masonry
+                        </a>
+                        <a class="dropdown-item" href="./dropdowns.html" >
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="./icons.html" >
+                          Icons
+                        </a>
+                        <a class="dropdown-item" href="./modals.html" >
+                          Modals
+                        </a>
+                        <a class="dropdown-item" href="./maps.html" >
+                          Maps
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html" >
+                          Vector maps
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html" >
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./charts.html" >
+                          Charts
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./charts-heatmap.html" >
+                          Charts heatmap
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html" >
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./skeleton.html" >
+                          Skeleton
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html" >
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tables.html" >
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./calendar.html" >
+                          Calendar
+                        </a>
+                        <a class="dropdown-item" href="./carousel.html" >
+                          Carousel
+                        </a>
+                        <a class="dropdown-item" href="./lists.html" >
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./typography.html" >
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html" >
+                          Markdown
+                        </a>
+                        <div 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>
+                            <a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
+                          </div>
+                        </div>
+                        <div 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>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </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>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./activity.html" >
+                      Activity
+                    </a>
+                    <a class="dropdown-item" href="./gallery.html" >
+                      Gallery
+                    </a>
+                    <a class="dropdown-item" href="./invoice.html" >
+                      Invoice
+                    </a>
+                    <a class="dropdown-item" href="./search-results.html" >
+                      Search results
+                    </a>
+                    <a class="dropdown-item" href="./pricing.html" >
+                      Pricing cards
+                    </a>
+                    <a class="dropdown-item" href="./users.html" >
+                      Users
+                    </a>
+                    <a class="dropdown-item" href="./license.html" >
+                      License
+                    </a>
+                    <a class="dropdown-item" href="./music.html" >
+                      Music
+                    </a>
+                    <a class="dropdown-item" href="./widgets.html" >
+                      Widgets
+                    </a>
+                    <a class="dropdown-item" href="./wizard.html" >
+                      Wizard
+                    </a>
+                  </div>
+                </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>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html" >
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html" >
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html" >
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html" >
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed-dark.html" >
+                          Condensed dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html" >
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html" >
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-dark.html" >
+                          Dark mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html" >
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html" >
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./docs/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"/><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">
+                      Documentation
+                    </span>
+                  </a>
+                </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 d-print-none">
+            <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-img"><img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128"  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 w-100">
+                      Pay now
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <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="./license.html" class="link-secondary">License</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="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</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,21 +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.14 (https://tabler.io)
+* @version 1.0.0-alpha.14
+* @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;
-  border-radius: 3px;
-  color: #ffffff; }
+  font-size: 85.7142857%;
+  border-radius: 3px; }
   pre.highlight::-webkit-scrollbar,
   .highlight pre::-webkit-scrollbar {
     width: 6px;
@@ -25,37 +22,167 @@ pre.highlight,
   pre.highlight::-webkit-scrollbar-thumb,
   .highlight pre::-webkit-scrollbar-thumb {
     border-radius: 5px;
-    background: transparent; }
+    background: #dbdee3; }
   pre.highlight::-webkit-scrollbar-corner,
   .highlight pre::-webkit-scrollbar-corner {
     background: transparent; }
   pre.highlight:hover::-webkit-scrollbar-thumb,
   .highlight pre:hover::-webkit-scrollbar-thumb {
-    background: #cbcfd6;
-    background: #5d6675; }
+    background: #c6cad0;
+    background: #c6cad0; }
 
-.highlight .c, .highlight .c1 {
-  color: #a0aec0; }
-
-.highlight .na, .highlight .nx, .highlight .nl, .language-css .highlight .na, .language-scss .highlight .na {
-  color: #ffe484; }
-
-.highlight .s, .highlight .dl, .highlight .s1, .highlight .s2, .highlight .mh {
-  color: #b5f4a5; }
-
-.highlight .mi, .highlight .language-js .nb, .highlight .nc, .highlight .nd, .highlight .nt {
-  color: #93ddfd; }
-
-.highlight .language-html .nt, .highlight .nb {
-  color: #ff8383; }
-
-.highlight .k, .highlight .kd, .highlight .nv, .highlight .n {
-  color: #d9a9ff; }
+.highlight {
+  margin: 0; }
+  .highlight code > * {
+    margin: 0 !important;
+    padding: 0 !important; }
+  .highlight .dl {
+    color: #4070a0; }
+  .highlight .c {
+    color: #727272; }
+  .highlight .c1 {
+    color: #727272; }
+  .highlight .ch {
+    font-style: italic;
+    color: #60a0b0; }
+  .highlight .cm {
+    color: #727272; }
+  .highlight .cp {
+    color: #008085; }
+  .highlight .cpf {
+    color: #007020; }
+  .highlight .cs {
+    color: #727272; }
+  .highlight .gd {
+    background-color: #fcc;
+    border: 1px solid #c00; }
+  .highlight .ge {
+    font-style: italic; }
+  .highlight .gh {
+    color: #030; }
+  .highlight .gi {
+    background-color: #cfc;
+    border: 1px solid #0c0; }
+  .highlight .gl {
+    text-decoration: underline; }
+  .highlight .go {
+    color: #aaa; }
+  .highlight .gp {
+    color: #009; }
+  .highlight .gr {
+    color: #f00; }
+  .highlight .gs {
+    font-weight: 700; }
+  .highlight .gt {
+    color: #9c6; }
+  .highlight .gu {
+    color: #030; }
+  .highlight .il {
+    color: #c24f19; }
+  .highlight .k {
+    color: #069; }
+  .highlight .kc {
+    color: #069; }
+  .highlight .kd {
+    color: #069; }
+  .highlight .kn {
+    color: #069; }
+  .highlight .kp {
+    color: #069; }
+  .highlight .kr {
+    color: #069; }
+  .highlight .kt {
+    color: #078; }
+  .highlight .m {
+    color: #c24f19; }
+  .highlight .mf {
+    color: #c24f19; }
+  .highlight .mb {
+    color: #40a070; }
+  .highlight .mh {
+    color: #c24f19; }
+  .highlight .mi {
+    color: #c24f19; }
+  .highlight .mo {
+    color: #c24f19; }
+  .highlight .na {
+    color: #006ee0; }
+  .highlight .nb {
+    color: #366; }
+  .highlight .nc {
+    color: #168174; }
+  .highlight .nd {
+    color: #6b62de; }
+  .highlight .ne {
+    color: #c00; }
+  .highlight .nf {
+    color: #b715f4; }
+  .highlight .ni {
+    color: #727272; }
+  .highlight .nl {
+    color: #6b62de; }
+  .highlight .nn {
+    color: #007ca5; }
+  .highlight .no {
+    color: #360; }
+  .highlight .nt {
+    color: #2f6f9f; }
+  .highlight .nv {
+    color: #033; }
+  .highlight .o {
+    color: #555; }
+  .highlight .ow {
+    color: #000; }
+  .highlight .s {
+    color: #d73038; }
+  .highlight .s1 {
+    color: #c30; }
+  .highlight .s2 {
+    color: #c30; }
+  .highlight .sa {
+    color: #4070a0; }
+  .highlight .sb {
+    color: #c30; }
+  .highlight .sc {
+    color: #c30; }
+  .highlight .sd {
+    font-style: italic;
+    color: #c30; }
+  .highlight .se {
+    color: #c30; }
+  .highlight .sh {
+    color: #c30; }
+  .highlight .si {
+    color: #a00; }
+  .highlight .sr {
+    color: #337e7e; }
+  .highlight .ss {
+    color: #fc3; }
+  .highlight .sx {
+    color: #c30; }
+  .highlight .w {
+    color: #bbb; }
+  .highlight .language-bash::before, .highlight .language-sh::before {
+    color: #009;
+    content: "$ ";
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none; }
+  .highlight .language-bash .m, .highlight .language-sh .m {
+    color: inherit; }
+  .highlight .language-powershell::before {
+    color: #009;
+    content: "PM> ";
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none; }
 
 .example {
   padding: 2rem;
   margin: 2rem 0;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid #e6e8e9;
   border-radius: 3px 3px 0 0;
   position: relative;
   min-height: 12rem;
@@ -69,18 +196,22 @@ pre.highlight,
     flex: 0 auto; }
 
 .example-content {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
+  line-height: 1.4285714;
+  color: #232e3c;
   flex: 1;
   max-width: 100%; }
 
 .example-bg {
-  background: #f5f7fb; }
+  background: #f4f6fa; }
 
 .example-code {
   margin: 2rem 0;
+  border: 1px solid #e6e8e9;
   border-top: none; }
   .example-code pre {
     margin: 0;
+    border: 0;
     border-radius: 0 0 3px 3px; }
   .example + .example-code {
     margin-top: -2rem; }
@@ -91,13 +222,13 @@ pre.highlight,
     margin-bottom: 0; }
 
 .example-column-1 {
-  max-width: 20rem; }
+  max-width: 26rem; }
 
 .example-column-2 {
-  max-width: 40rem; }
+  max-width: 52rem; }
 
 .example-modal-backdrop {
-  background: #354052;
+  background: #232e3c;
   opacity: 0.24;
   position: absolute;
   width: 100%;
@@ -108,12 +239,12 @@ pre.highlight,
 
 @media not print {
   .theme-dark .example-code {
-    border: 1px solid rgba(134, 140, 151, 0.24);
+    border: 1px solid #e6e8e9;
     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 #e6e8e9;
     border-top: none; } }
 
 .card-sponsor {
@@ -124,13 +255,72 @@ pre.highlight,
 body.no-transitions * {
   transition: none !important; }
 
-.toc-entry:before {
-  content: '- '; }
+.dropdown-menu-demo {
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  top: 0;
+  margin-bottom: 1rem; }
 
-.toc-entry ul {
-  list-style: none;
-  padding-left: 1rem; }
+.demo-icon-preview {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0; }
+  .demo-icon-preview svg,
+  .demo-icon-preview i {
+    width: 15rem;
+    height: 15rem;
+    font-size: 15rem;
+    stroke-width: 1.5;
+    margin: 0 auto;
+    display: block; }
+    @media (max-width: 575.98px) {
+      .demo-icon-preview svg,
+      .demo-icon-preview i {
+        width: 10rem;
+        height: 10rem;
+        font-size: 10rem; } }
 
-.toc-entry a {
-  color: #868c97; }
-/*# sourceMappingURL=demo.css.map */
+.demo-icon-preview-icon pre {
+  margin: 0;
+  -webkit-user-select: all;
+     -moz-user-select: all;
+          user-select: all; }
+
+.demo-dividers > p {
+  opacity: .2;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none; }
+
+.demo-icons-list {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 0 -2px -1px 0;
+  list-style: none; }
+  .demo-icons-list > * {
+    flex: 1 0 7rem; }
+
+.demo-icons-list-wrap {
+  overflow: hidden; }
+
+.demo-icons-list-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 7rem;
+  text-align: center;
+  padding: .5rem;
+  border-right: 1px solid #e6e8e9;
+  border-bottom: 1px solid #e6e8e9;
+  color: inherit;
+  cursor: pointer; }
+  .demo-icons-list-item .icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: 1.5rem; }
+  .demo-icons-list-item:hover {
+    text-decoration: none; }

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.14 (https://tabler.io)
+* @version 1.0.0-alpha.14
+* @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 #e6e8e9;
   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.14 (https://tabler.io)
+* @version 1.0.0-alpha.14
+* @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/css/tabler-vendors.css

@@ -0,0 +1,322 @@
+/*!
+* Tabler v1.0.0-alpha.14 (https://tabler.io)
+* @version 1.0.0-alpha.14
+* @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)
+*/
+.selectize-control {
+  padding: 0;
+  border: 0;
+  height: auto; }
+  .selectize-control.multi .selectize-input.has-items {
+    padding-left: 6px; }
+  .selectize-control.multi .selectize-input > div {
+    font-size: 0.75rem;
+    margin: 0 6px 2px 0;
+    padding: 2px 8px;
+    border-radius: 3px;
+    background-color: rgba(135, 142, 151, 0.1);
+    color: inherit; }
+  .selectize-control .remove {
+    font-size: inherit !important;
+    font-weight: normal !important;
+    border-left: 0 !important;
+    color: #656d77 !important; }
+  .selectize-control.is-valid {
+    padding: 0; }
+    .selectize-control.is-valid .selectize-input {
+      border-color: #5eba00; }
+      .selectize-control.is-valid .selectize-input.focus {
+        box-shadow: 0 0 0 0.25rem rgba(94, 186, 0, 0.25); }
+    .selectize-control.is-valid .selectize-dropdown {
+      background: none;
+      background-color: inherit;
+      border-color: #e6e8e9;
+      padding-right: 0; }
+  .selectize-control.is-invalid {
+    padding: 0; }
+    .selectize-control.is-invalid .selectize-input {
+      border-color: #e53e3e; }
+      .selectize-control.is-invalid .selectize-input.focus {
+        box-shadow: 0 0 0 0.25rem rgba(229, 62, 62, 0.25); }
+    .selectize-control.is-invalid .selectize-dropdown {
+      background: none;
+      background-color: inherit;
+      border-color: #e6e8e9;
+      padding-right: 0; }
+
+.selectize-input {
+  display: flex !important;
+  border: 1px solid #e6e8e9;
+  padding: 0.4375rem 0.75rem;
+  font-size: 0.875rem;
+  box-shadow: none;
+  line-height: 1.4285714;
+  background-color: inherit !important;
+  color: inherit !important;
+  flex-wrap: wrap; }
+  .selectize-input.full {
+    background-color: inherit; }
+  .selectize-input.dropdown-active {
+    border-radius: 3px; }
+  .selectize-control.single .selectize-input {
+    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dadcde' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center/16px 12px; }
+  .selectize-input.focus {
+    border-color: #90b5e2;
+    box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
+  .selectize-input:after {
+    content: none !important; }
+
+.selectize-dropdown {
+  height: auto;
+  background: #ffffff;
+  padding: 0.4375rem 0;
+  margin-top: 1px; }
+  .selectize-dropdown .option,
+  .selectize-dropdown .option-header {
+    padding: 0.25rem 0.75rem; }
+  .selectize-dropdown .active {
+    background: rgba(101, 109, 119, 0.06);
+    color: inherit;
+    cursor: pointer; }
+
+.jqvmap-zoomin,
+.jqvmap-zoomout {
+  height: 1.5rem;
+  width: 1.5rem;
+  left: .5rem;
+  border: 1px solid #e6e8e9;
+  background: #ffffff;
+  color: #232e3c;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1; }
+
+.jqvmap-zoomin {
+  top: .5rem; }
+
+.jqvmap-zoomout {
+  top: 2.5rem; }
+
+.jqvmap-label {
+  font-family: inherit;
+  font-size: 0.625rem;
+  line-height: 1;
+  padding: .25rem;
+  background: #232e3c; }
+
+.apexcharts-title-text {
+  font-weight: 600 !important; }
+
+.apexcharts-tooltip-title {
+  font-weight: 600 !important;
+  padding-bottom: .25rem !important; }
+
+.apexcharts-gridline,
+.apexcharts-ycrosshairs,
+.apexcharts-xaxis-tick {
+  stroke: #e6e8e9 !important; }
+
+.apexcharts-tooltip {
+  line-height: 1;
+  color: #ffffff;
+  background: #232e3c !important;
+  border: 0 !important;
+  border-radius: 3px !important; }
+
+.apexcharts-tooltip-title {
+  margin: 0 !important;
+  background: transparent !important;
+  border: 0 !important; }
+
+.apexcharts-tooltip-series-group {
+  padding: 0 8px !important; }
+
+.apexcharts-tooltip-marker {
+  width: .5rem;
+  height: .5rem; }
+
+.apexcharts-gridline,
+.apexcharts-ycrosshairs,
+.apexcharts-xaxis-tick {
+  stroke: #e7eaef; }
+
+.apexcharts-yaxis-label,
+.apexcharts-xaxis-label {
+  fill: #656d77; }
+
+.fc-unthemed .fc-content,
+.fc-unthemed .fc-divider,
+.fc-unthemed .fc-list-heading td,
+.fc-unthemed .fc-list-view,
+.fc-unthemed .fc-popover,
+.fc-unthemed .fc-row,
+.fc-unthemed tbody,
+.fc-unthemed td,
+.fc-unthemed th,
+.fc-unthemed thead {
+  border-color: #e6e8e9; }
+
+.fc-unthemed .fc-toolbar h2 {
+  font-size: 1.125rem;
+  margin: 0; }
+
+.fc-unthemed .fc-widget-header {
+  border: 0; }
+
+.fc-unthemed .fc-day-header {
+  padding-bottom: .25rem;
+  font-weight: 600; }
+
+.fc-unthemed.card-calendar .fc-day-grid-container {
+  border-bottom: 0;
+  border-left: 0; }
+
+.fc-unthemed .fc-time {
+  font-weight: 600; }
+
+.fc-unthemed .fc-event {
+  border-color: rgba(0, 0, 0, 0.05);
+  color: #206bc4;
+  background-color: #e9f0f9;
+  padding: 0 .25rem; }
+
+.flatpickr-input.flatpickr-input {
+  background: #ffffff; }
+  .flatpickr-input.flatpickr-input.active {
+    border-color: #90b5e2;
+    box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
+
+.flatpickr-calendar {
+  background: #ffffff;
+  border: 1px solid rgba(101, 109, 119, 0.24);
+  border-radius: 3px;
+  padding: .5rem;
+  font-size: inherit;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  margin-top: -1px; }
+  .flatpickr-calendar:before, .flatpickr-calendar:after {
+    content: none; }
+  .flatpickr-calendar .flatpickr-innerContainer,
+  .flatpickr-calendar .flatpickr-rContainer,
+  .flatpickr-calendar .dayContainer,
+  .flatpickr-calendar .flatpickr-days {
+    width: 100%; }
+  .flatpickr-calendar .dayContainer,
+  .flatpickr-calendar .flatpickr-day {
+    max-width: 100%;
+    min-width: 0; }
+  .flatpickr-calendar.inline {
+    width: 100%;
+    box-shadow: none;
+    margin: 0; }
+
+.flatpickr-day {
+  color: inherit;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  line-height: 1; }
+  .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay {
+    color: inherit;
+    opacity: .2; }
+  .flatpickr-day.today {
+    border-color: #e6e8e9; }
+  .flatpickr-day.selected {
+    background-color: #206bc4; }
+
+span.flatpickr-weekday {
+  font-size: 0.625rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  line-height: 1.6;
+  color: #656d77; }
+
+.flatpickr-months {
+  margin-bottom: .5rem; }
+  .flatpickr-months .flatpickr-month {
+    color: currentColor;
+    fill: currentColor; }
+  .flatpickr-months .flatpickr-current-month {
+    font-weight: 400; }
+  .flatpickr-months .flatpickr-monthDropdown-months {
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    font-weight: inherit; }
+  .flatpickr-months .flatpickr-prev-month,
+  .flatpickr-months .flatpickr-next-month {
+    position: static;
+    color: #656d77; }
+    .flatpickr-months .flatpickr-prev-month:hover,
+    .flatpickr-months .flatpickr-next-month:hover {
+      color: #232e3c; }
+    .flatpickr-months .flatpickr-prev-month svg,
+    .flatpickr-months .flatpickr-next-month svg {
+      display: block;
+      fill: currentColor !important; }
+  .flatpickr-months .numInputWrapper .cur-year {
+    font-weight: inherit; }
+  .flatpickr-months .numInputWrapper .arrowUp,
+  .flatpickr-months .numInputWrapper .arrowDown {
+    display: none; }
+
+.flatpickr-day.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-day.nextMonthDay.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.today.inRange,
+.flatpickr-day.nextMonthDay.today.inRange,
+.flatpickr-day:hover,
+.flatpickr-day.prevMonthDay:hover,
+.flatpickr-day.nextMonthDay:hover,
+.flatpickr-day:focus,
+.flatpickr-day.prevMonthDay:focus,
+.flatpickr-day.nextMonthDay:focus {
+  background: rgba(101, 109, 119, 0.06);
+  border-color: transparent; }
+
+.noUi-target {
+  border: 0;
+  box-shadow: none;
+  background: none;
+  border-radius: 0;
+  color: #206bc4; }
+
+.noUi-horizontal {
+  height: 1.25rem;
+  padding: .5rem 0; }
+
+.noUi-base {
+  background: rgba(169, 174, 182, 0.24);
+  border-radius: 1rem; }
+
+.noUi-handle {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid #ffffff;
+  box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
+  border-radius: 1rem;
+  background: currentColor;
+  outline: 0; }
+  .noUi-handle:before, .noUi-handle:after {
+    content: none; }
+  .noUi-horizontal .noUi-handle {
+    width: 1rem;
+    height: 1rem;
+    top: -0.5rem;
+    right: -0.5rem;
+    margin: 1px 1px 0 0; }
+  .noUi-handle.noUi-active, .noUi-handle:focus {
+    box-shadow: 0 0 0 1px #f4f6fa, 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
+
+.noUi-connect {
+  background: currentColor; }

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 +0,0 @@
-.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}

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

@@ -1 +0,0 @@
-.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}

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

@@ -1 +0,0 @@
-@charset "UTF-8";.fc-timeGrid-view .fc-day-grid{position:relative;z-index:2}.fc-timeGrid-view .fc-day-grid .fc-row{min-height:3em}.fc-timeGrid-view .fc-day-grid .fc-row .fc-content-skeleton{padding-bottom:1em}.fc .fc-axis{vertical-align:middle;padding:0 4px;white-space:nowrap}.fc-ltr .fc-axis{text-align:right}.fc-rtl .fc-axis{text-align:left}.fc-time-grid,.fc-time-grid-container{position:relative;z-index:1}.fc-time-grid{min-height:100%}.fc-time-grid table{border:0 hidden transparent}.fc-time-grid>.fc-bg{z-index:1}.fc-time-grid .fc-slats,.fc-time-grid>hr{position:relative;z-index:2}.fc-time-grid .fc-content-col{position:relative}.fc-time-grid .fc-content-skeleton{position:absolute;z-index:3;top:0;left:0;right:0}.fc-time-grid .fc-business-container{position:relative;z-index:1}.fc-time-grid .fc-bgevent-container{position:relative;z-index:2}.fc-time-grid .fc-highlight-container{z-index:3;position:relative}.fc-time-grid .fc-event-container{position:relative;z-index:4}.fc-time-grid .fc-now-indicator-line{z-index:5}.fc-time-grid .fc-mirror-container{position:relative;z-index:6}.fc-time-grid .fc-slats td{height:1.5em;border-bottom:0}.fc-time-grid .fc-slats .fc-minor td{border-top-style:dotted}.fc-time-grid .fc-highlight{position:absolute;left:0;right:0}.fc-ltr .fc-time-grid .fc-event-container{margin:0 2.5% 0 2px}.fc-rtl .fc-time-grid .fc-event-container{margin:0 2px 0 2.5%}.fc-time-grid .fc-bgevent,.fc-time-grid .fc-event{position:absolute;z-index:1}.fc-time-grid .fc-bgevent{left:0;right:0}.fc-time-grid-event{margin-bottom:1px}.fc-time-grid-event-inset{-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff}.fc-time-grid-event.fc-not-start{border-top-width:0;padding-top:1px;border-top-left-radius:0;border-top-right-radius:0}.fc-time-grid-event.fc-not-end{border-bottom-width:0;padding-bottom:1px;border-bottom-left-radius:0;border-bottom-right-radius:0}.fc-time-grid-event .fc-content{overflow:hidden;max-height:100%}.fc-time-grid-event .fc-time,.fc-time-grid-event .fc-title{padding:0 1px}.fc-time-grid-event .fc-time{font-size:.85em;white-space:nowrap}.fc-time-grid-event.fc-short .fc-content{white-space:nowrap}.fc-time-grid-event.fc-short .fc-time,.fc-time-grid-event.fc-short .fc-title{display:inline-block;vertical-align:top}.fc-time-grid-event.fc-short .fc-time span{display:none}.fc-time-grid-event.fc-short .fc-time:before{content:attr(data-start)}.fc-time-grid-event.fc-short .fc-time:after{content:" - "}.fc-time-grid-event.fc-short .fc-title{font-size:.85em;padding:0}.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer{left:0;right:0;bottom:0;height:8px;overflow:hidden;line-height:8px;font-size:11px;font-family:monospace;text-align:center;cursor:s-resize}.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer:after{content:"="}.fc-time-grid-event.fc-selected .fc-resizer{border-radius:5px;border-width:1px;width:8px;height:8px;border-style:solid;border-color:inherit;background:#fff;left:50%;margin-left:-5px;bottom:-5px}.fc-time-grid .fc-now-indicator-line{border-top-width:1px;left:0;right:0}.fc-time-grid .fc-now-indicator-arrow{margin-top:-5px}.fc-ltr .fc-time-grid .fc-now-indicator-arrow{left:0;border-width:5px 0 5px 6px;border-top-color:transparent;border-bottom-color:transparent}.fc-rtl .fc-time-grid .fc-now-indicator-arrow{right:0;border-width:5px 6px 5px 0;border-top-color:transparent;border-bottom-color:transparent}

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}