Release 1.0.0-beta

Make lite validation also work properly for form select

.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"
+    }
+  ]
+}

.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

@@ -4,11 +4,13 @@ node_modules/
 .jekyll-metadata
 .jekyll-cache
 /tmp/
+/.tmp/
 /tmp-dist/
 /yarn.lock
 .DS_Store
 /_site/
 /.cache/
+.sass-cache/
 
 .vscode/
 
@@ -19,3 +21,6 @@ node_modules/
 /svg-tmp/
 /components/
 /percy.sh
+/Gemfile.lock
+/package-lock.json
+/src/pages/playground.html

.percy.yml

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

Gemfile

@@ -1,9 +1,8 @@
 source "https://rubygems.org"
 
-gem "jekyll", "~> 4.0"
+gem "jekyll", "4.2.0"
 
 group :jekyll_plugins do
-	gem 'jekyll-toc'
 	gem "jekyll-random"
 	gem "jekyll-tidy"
 	gem "jekyll-timeago"

Gemfile.lock

@@ -1,89 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    addressable (2.7.0)
-      public_suffix (>= 2.0.2, < 5.0)
-    colorator (1.1.0)
-    concurrent-ruby (1.1.6)
-    em-websocket (0.5.1)
-      eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0.6.0)
-    eventmachine (1.2.7)
-    ffi (1.12.2)
-    forwardable-extended (2.6.0)
-    htmlbeautifier (1.3.1)
-    htmlcompressor (0.4.0)
-    http_parser.rb (0.6.0)
-    i18n (1.8.2)
-      concurrent-ruby (~> 1.0)
-    jekyll (4.0.0)
-      addressable (~> 2.4)
-      colorator (~> 1.0)
-      em-websocket (~> 0.5)
-      i18n (>= 0.9.5, < 2)
-      jekyll-sass-converter (~> 2.0)
-      jekyll-watch (~> 2.0)
-      kramdown (~> 2.1)
-      kramdown-parser-gfm (~> 1.0)
-      liquid (~> 4.0)
-      mercenary (~> 0.3.3)
-      pathutil (~> 0.9)
-      rouge (~> 3.0)
-      safe_yaml (~> 1.0)
-      terminal-table (~> 1.8)
-    jekyll-random (0.1)
-      jekyll (>= 3.3, < 5.0)
-    jekyll-redirect-from (0.16.0)
-      jekyll (>= 3.3, < 5.0)
-    jekyll-sass-converter (2.1.0)
-      sassc (> 2.0.1, < 3.0)
-    jekyll-tidy (0.2.2)
-      htmlbeautifier
-      htmlcompressor
-      jekyll
-    jekyll-timeago (0.13.1)
-      mini_i18n (>= 0.8.0)
-    jekyll-toc (0.13.1)
-      jekyll (>= 3.7)
-      nokogiri (~> 1.9)
-    jekyll-watch (2.2.1)
-      listen (~> 3.0)
-    kramdown (2.1.0)
-    kramdown-parser-gfm (1.1.0)
-      kramdown (~> 2.0)
-    liquid (4.0.3)
-    listen (3.2.1)
-      rb-fsevent (~> 0.10, >= 0.10.3)
-      rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.3.6)
-    mini_i18n (0.8.0)
-    mini_portile2 (2.4.0)
-    nokogiri (1.10.9)
-      mini_portile2 (~> 2.4.0)
-    pathutil (0.16.2)
-      forwardable-extended (~> 2.6)
-    public_suffix (4.0.3)
-    rb-fsevent (0.10.3)
-    rb-inotify (0.10.1)
-      ffi (~> 1.0)
-    rouge (3.17.0)
-    safe_yaml (1.0.5)
-    sassc (2.2.1)
-      ffi (~> 1.9)
-    terminal-table (1.8.0)
-      unicode-display_width (~> 1.1, >= 1.1.1)
-    unicode-display_width (1.7.0)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  jekyll (~> 4.0)
-  jekyll-random
-  jekyll-redirect-from
-  jekyll-tidy
-  jekyll-timeago
-  jekyll-toc
-
-BUNDLED WITH
-   1.17.3

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-2019 The Tabler Authors
+Copyright (c) 2018-2021 The Tabler Authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,18 +1,31 @@
-# Tabler
 
+<p align="center">
+<a href="https://github.com/tabler/tabler"><img src="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/logo.svg" alt="A premium and open source dashboard template with a responsive and high-quality UI." width="300"></a><br><br>
 A premium and open source dashboard template with a responsive and high-quality UI.
+</p>
 
-<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>
+<p align="center">
+<a href="https://www.npmjs.com/package/@tabler/core" target="__blank"><img src="https://img.shields.io/npm/v/@tabler/core?color=1864ab&label=Latest+version" alt="NPM version"></a>
+<a href="https://www.npmjs.com/package/@tabler/core" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@tabler/core?color=1971c2&label=Downloads"></a>
+<a href="https://preview.tabler.io" target="__blank"><img src="https://img.shields.io/static/v1?label=Demo&message=preview&color=228be6" alt="Tabler preview"></a>
+<a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg?label=License&message=MIT&color=1c7ed6" alt="License"></a>
+<a href="https://github.com/tabler/tabler/archive/dev.zip" target="__blank"><img src="https://img.shields.io/static/v1?label=Download&message=ZIP&color=339af0" alt="Tabler preview"></a>
+<br>
+<a href="https://github.com/tabler/tabler" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/tabler/tabler?style=social"></a>
+</p>
 
-![Tabler preview](/static/tabler-preview.png?raw=true)
+<p align="center">
+  <a href="https://github.com/sponsors/codecalm">
+    <img src='https://raw.githubusercontent.com/tabler/static/main/sponsors.svg'>
+  </a>
+</p>
 
 
-## Status
+## Preview
 
-<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>
+Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love! Choose the layouts and components you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful! <a href="https://preview.tabler.io">Show me demo</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="https://preview.tabler.io" target="_blank"><img src="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/tabler-preview.png" alt="Tabler preview"></a>
 
 
 ## Features
@@ -26,10 +39,9 @@ We've created this admin panel for everyone who wants to create templates based
 * **Demo pages**: Tabler features over 20 individual pages using various components, which gives you the freedom to choose and combine. All components can vary in color and styling that you can easily modify using Sass. Sky is the limit!
 * **Single Page Application versions:** [Tabler React](https://github.com/tabler/tabler-react) has React components for Tabler.
 
-
 ## Sponsor Tabler
 
-<a href="https://github.com/sponsors/codecalm" target="_blank"><img src="/static/sponsor-banner-readme.png?raw=true" alt="Sponsor Tabler" /></a>
+<a href="https://github.com/sponsors/codecalm" target="_blank"><img src="/src/static/sponsor-banner-readme.png?raw=true" alt="Sponsor Tabler" /></a>
 
 
 ### Sponsors
@@ -70,12 +82,35 @@ Once you complete the setup, you'll be able to run the various commands provided
 
 1. From the root `/tabler` directory, run `npm run start` in the command line.
 2. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
-3. Any change in the `/pages` directory will build the application and refresh the page.
+3. Any change in the `/src` directory will build the application and refresh the page.
 
 **Note**:
 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-demo.yml

@@ -1 +0,0 @@
-preview: true

_config.yml

@@ -1,13 +1,29 @@
-source: pages
+source: src/pages
 destination: tmp
 
-version: 1.0.0-alpha.5
+keep_files:
+  - css
+  - js
+  - img
+  - dist
+  - static
+  - playground.html
+
+use-iconfont: false
+rtl: 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
+mapbox-key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
+google-maps-key: AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI
+google-maps-dev-key: AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw
+npm-package: "@tabler/core"
 
 debug: false
 
@@ -15,23 +31,18 @@ layout-dark: false
 
 plugins:
   - jekyll-random
-  - jekyll-toc
   - jekyll-tidy
   - jekyll-timeago
   - jekyll-redirect-from
 
-tabler-plugins:
+tabler-css-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 +53,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:
@@ -61,7 +63,6 @@ defaults:
       path: "*.md"
     values:
       layout: markdown
-
   - scope:
       type: "pages"
     values:
@@ -70,12 +71,6 @@ defaults:
       type: "docs"
     values:
       layout: docs
-      toc: true
-#  - scope:
-#      type: "components"
-#    values:
-#      layout: component
-
 
 colors:
   blue:
@@ -114,9 +109,6 @@ colors:
   cyan:
     hex: '#17a2b8'
     title: Cyan
-  gray:
-    hex: '#868e96'
-    title: Gray
 
 colors-extra:
   white:
@@ -125,6 +117,9 @@ colors-extra:
   dark:
     hex: '#303645'
     title: Dark
+  gray:
+    hex: '#868e96'
+    title: Gray
 
 variants:
   - name: success
@@ -136,7 +131,7 @@ variants:
   - name: danger
     icon: alert-circle
 
-button-variants:
+theme-colors:
   primary:
     class: primary
     title: Primary
@@ -161,9 +156,6 @@ button-variants:
   dark:
     class: dark
     title: Dark
-  link:
-    class: link
-    title: Link
 
 button-states:
   - class:
@@ -175,47 +167,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/400.html

@@ -1,142 +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 400 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <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" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased border-top-wide border-primary d-flex flex-column">
-    <div class="flex-fill d-flex align-items-center justify-content-center">
-      <div class="container-tight py-6">
-        <div class="empty">
-          <div class="empty-icon">
-            <div class="display-4">400</div>
-          </div>
-          <p class="empty-title h3">Oops… You just found an error page</p>
-          <p class="empty-subtitle text-muted">
-            We are sorry but your request contains bad syntax and cannot be fulfilled
-          </p>
-          <div class="empty-action">
-            <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-              Take me home
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
-    <script src="./dist/libs/apexcharts/dist/apexcharts.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-revenue-bg'), {
-      		chart: {
-      			type: "area",
-      			fontFamily: 'inherit',
-      			height: 40.0,
-      			sparkline: {
-      				enabled: true
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: .16,
-      			type: 'solid'
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "smooth",
-      		},
-      		series: [{
-      			name: "Profits",
-      			data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
-      		}],
-      		grid: {
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0
-      			},
-      			tooltip: {
-      				enabled: false
-      			},
-      			axisBorder: {
-      				show: false,
-      			},
-      			type: 'datetime',
-      		},
-      		yaxis: {
-      			labels: {
-      				padding: 4
-      			},
-      		},
-      		labels: [
-      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
-      		],
-      		colors: ["#206bc4"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

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" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased border-top-wide border-primary d-flex flex-column">
-    <div class="flex-fill d-flex align-items-center justify-content-center">
-      <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"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></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" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased border-top-wide border-primary d-flex flex-column">
-    <div class="flex-fill d-flex align-items-center justify-content-center">
-      <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"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

demo/404.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 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" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased border-top-wide border-primary d-flex flex-column">
-    <div class="flex-fill d-flex align-items-center justify-content-center">
-      <div class="container-tight py-6">
-        <div class="empty">
-          <div class="empty-icon">
-            <div class="display-4">404</div>
-          </div>
-          <p class="empty-title h3">Oops… You just found an error page</p>
-          <p class="empty-subtitle text-muted">
-            We are sorry but the page you are looking for was not found
-          </p>
-          <div class="empty-action">
-            <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-              Take me home
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

demo/500.html

@@ -1,79 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Page 500 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased border-top-wide border-primary d-flex flex-column">
-    <div class="flex-fill d-flex align-items-center justify-content-center">
-      <div class="container-tight py-6">
-        <div class="empty">
-          <div class="empty-icon">
-            <div class="display-4">500</div>
-          </div>
-          <p class="empty-title h3">Oops… You just found an error page</p>
-          <p class="empty-subtitle text-muted">
-            We are sorry but our server encountered an internal error
-          </p>
-          <div class="empty-action">
-            <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-              Take me home
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

demo/503.html

@@ -1,79 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Page 503 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased border-top-wide border-primary d-flex flex-column">
-    <div class="flex-fill d-flex align-items-center justify-content-center">
-      <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"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

demo/accordion.html

@@ -0,0 +1,428 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 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>Accordion - 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"/>
+  </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-bs-toggle="collapse" data-bs-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item dropdown d-none d-md-flex me-3">
+              <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                <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-end 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-bs-toggle="dropdown" aria-label="Open user menu">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end 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-bs-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">
+                      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 active" href="./accordion.html" >
+                          Accordion
+                        </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="./colors.html" >
+                          Colors
+                        </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="./map-fullsize.html" >
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html" >
+                          Vector maps
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html" >
+                          Navigation
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./charts.html" >
+                          Charts
+                        </a>
+                        <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="./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="./page-headers.html" >
+                          Page headers
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html" >
+                          Markdown
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-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="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-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-bs-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-bs-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-transparent.html" >
+                          Vertical transparent
+                        </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-sticky.html" >
+                          Navbar sticky
+                        </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…" aria-label="Search in website">
+                  </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">
+                  Accordion
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="card">
+            <div class="card-body">
+              <div class="accordion" id="accordion-example">
+                <div class="accordion-item">
+                  <h2 class="accordion-header" id="heading-1">
+                    <button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true">
+                      Accordion Item #1
+                    </button>
+                  </h2>
+                  <div id="collapse-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-example">
+                    <div class="accordion-body pt-0">
+                      <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+                    </div>
+                  </div>
+                </div>
+                <div class="accordion-item">
+                  <h2 class="accordion-header" id="heading-2">
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false">
+                      Accordion Item #2
+                    </button>
+                  </h2>
+                  <div id="collapse-2" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
+                    <div class="accordion-body pt-0">
+                      <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+                    </div>
+                  </div>
+                </div>
+                <div class="accordion-item">
+                  <h2 class="accordion-header" id="heading-3">
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false">
+                      Accordion Item #3
+                    </button>
+                  </h2>
+                  <div id="collapse-3" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
+                    <div class="accordion-body pt-0">
+                      <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+                    </div>
+                  </div>
+                </div>
+                <div class="accordion-item">
+                  <h2 class="accordion-header" id="heading-4">
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="false">
+                      Accordion Item #4
+                    </button>
+                  </h2>
+                  <div id="collapse-4" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
+                    <div class="accordion-body pt-0">
+                      <strong>This is the fourth item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+                    </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 ms-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" rel="noopener">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 &copy; 2021
+                    <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-beta</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js"></script>
+  </body>
+</html>

demo/activity.html

@@ -0,0 +1,630 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 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"/>
+  </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-bs-toggle="collapse" data-bs-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item dropdown d-none d-md-flex me-3">
+              <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                <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-end 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-bs-toggle="dropdown" aria-label="Open user menu">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end 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-bs-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">
+                      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="./accordion.html" >
+                          Accordion
+                        </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="./colors.html" >
+                          Colors
+                        </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="./map-fullsize.html" >
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html" >
+                          Vector maps
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html" >
+                          Navigation
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./charts.html" >
+                          Charts
+                        </a>
+                        <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="./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="./page-headers.html" >
+                          Page headers
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html" >
+                          Markdown
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-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="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-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-bs-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-bs-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-transparent.html" >
+                          Vertical transparent
+                        </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-sticky.html" >
+                          Navbar sticky
+                        </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…" aria-label="Search in website">
+                  </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 ms-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" rel="noopener">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 &copy; 2021
+                    <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-beta</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js"></script>
+  </body>
+</html>

demo/auth-lock.html

@@ -0,0 +1,56 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 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"/>
+  </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 -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js"></script>
+  </body>
+</html>

demo/blank.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-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
@@ -13,140 +13,163 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>Blank page - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <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" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
+    <!-- CSS files -->
     <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
+    <link href="./dist/css/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">
-      <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">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
             </a>
-          <div class="navbar-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item dropdown d-none d-md-flex me-3">
+              <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                <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-end 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-bs-toggle="dropdown" aria-label="Open user menu">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end 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"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
                     </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>
+                <li class="nav-item active dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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">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 class="nav-link-title">
+                      Interface
                     </span>
-                  <span class="nav-link-title">Base</span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
-                  <li >
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
                         <a class="dropdown-item" href="./empty.html" >
                           Empty page
                         </a>
-                  </li>
-                  <li >
+                        <a class="dropdown-item" href="./accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item active" 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="./cards-masonry.html" >
+                          Cards Masonry
+                        </a>
+                        <a class="dropdown-item" href="./colors.html" >
+                          Colors
+                        </a>
                         <a class="dropdown-item" href="./dropdowns.html" >
                           Dropdowns
                         </a>
-                  </li>
-                  <li >
+                        <a class="dropdown-item" href="./icons.html" >
+                          Icons
+                        </a>
                         <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="./map-fullsize.html" >
+                          Map fullsize
+                        </a>
                         <a class="dropdown-item" href="./maps-vector.html" >
                           Vector maps
                         </a>
-                  </li>
-                  <li >
+                        <a class="dropdown-item" href="./navigation.html" >
+                          Navigation
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
                         <a class="dropdown-item" href="./charts.html" >
                           Charts
                         </a>
-                  </li>
-                  <li >
+                        <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>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./calendar.html" >
-                      Calendar
-                    </a>
-                  </li>
-                  <li >
                         <a class="dropdown-item" href="./carousel.html" >
                           Carousel
                         </a>
-                  </li>
-                  <li >
                         <a class="dropdown-item" href="./lists.html" >
                           Lists
                         </a>
-                  </li>
-                  <li class="dropright">
-                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        <a class="dropdown-item" href="./typography.html" >
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./page-headers.html" >
+                          Page headers
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html" >
+                          Markdown
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -154,590 +177,202 @@
                             <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>
-                  </li>
-                  <li class="dropright">
-                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        </div>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-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>
+                            <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>
-                </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>
+                  <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>
-                  <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
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./snippets.html" >
-                      Snippets
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./activity.html" >
+                      Activity
                     </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./search-results.html" >
-                      Search results
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./pricing.html" >
-                      Pricing cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./users.html" >
-                      Users
-                    </a>
-                  </li>
-                  <li >
                     <a class="dropdown-item" href="./gallery.html" >
                       Gallery
                     </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./profile.html" >
-                      Profile
+                    <a 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>
-                  </li>
-                  <li >
                     <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>
-                </ul>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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-transparent.html" >
+                          Vertical transparent
+                        </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-sticky.html" >
+                          Navbar sticky
+                        </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 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>
+                  <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>
-                  <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">
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search…">
+                    <input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
                   </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 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"><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-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset 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 d-flex flex-column justify-content-center">
+        <div class="container-xl d-flex flex-column justify-content-center">
           <div class="empty">
-            <div class="empty-icon">
-              <img src="./static/illustrations/undraw_printing_invoices_5r4r.svg" class="h-8 mb-4" alt="">
+            <div class="empty-img"><img src="./static/illustrations/undraw_printing_invoices_5r4r.svg" height="128"  alt="">
             </div>
-            <p class="empty-title h3">No results found</p>
+            <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" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
                 Add your first client
               </a>
             </div>
           </div>
         </div>
-        <footer class="footer footer-transparent">
+        <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">
+              <div class="col-lg-auto ms-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>
+                  <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" rel="noopener">Source code</a></li>
                 </ul>
               </div>
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
-                Copyright © 2020
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2021
                     <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-beta</a>
+                  </li>
+                </ul>
               </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"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></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/blog.html

@@ -1,985 +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" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <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="./dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./maps.html" >
-                      Maps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./maps-vector.html" >
-                      Vector maps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./calendar.html" >
-                      Calendar
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./lists.html" >
-                      Lists
-                    </a>
-                  </li>
-                  <li class="dropright">
-                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                      Authentication
-                    </a>
-                    <div class="dropdown-menu">
-                      <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                      <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                      <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                      <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                    </div>
-                  </li>
-                  <li class="dropright">
-                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                      Error pages
-                    </a>
-                    <div class="dropdown-menu">
-                      <a href="./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>
-                  <li >
-                    <a class="dropdown-item" href="./users.html" >
-                      Users
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./gallery.html" >
-                      Gallery
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./profile.html" >
-                      Profile
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./music.html" >
-                      Music
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <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 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"><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-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset 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"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></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,937 +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" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <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="./dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./maps.html" >
-                      Maps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./maps-vector.html" >
-                      Vector maps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./tables.html" >
-                      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 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>
-                  <li >
-                    <a class="dropdown-item" href="./users.html" >
-                      Users
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./gallery.html" >
-                      Gallery
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./profile.html" >
-                      Profile
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./music.html" >
-                      Music
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <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 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"><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-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset 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"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
-    <script src="./dist/libs/fullcalendar/core/main.min.js"></script>
-    <script src="./dist/libs/fullcalendar/daygrid/main.min.js"></script>
-    <script src="./dist/libs/fullcalendar/interaction/main.min.js"></script>
-    <script src="./dist/libs/fullcalendar/timegrid/main.min.js"></script>
-    <script src="./dist/libs/fullcalendar/list/main.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></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,622 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 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"/>
+  </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-bs-toggle="collapse" data-bs-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item dropdown d-none d-md-flex me-3">
+              <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                <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-end 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-bs-toggle="dropdown" aria-label="Open user menu">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end 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-bs-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">
+                      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="./accordion.html" >
+                          Accordion
+                        </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="./colors.html" >
+                          Colors
+                        </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="./map-fullsize.html" >
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html" >
+                          Vector maps
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html" >
+                          Navigation
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./charts.html" >
+                          Charts
+                        </a>
+                        <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="./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="./page-headers.html" >
+                          Page headers
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html" >
+                          Markdown
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-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="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-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-bs-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-bs-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-transparent.html" >
+                          Vertical transparent
+                        </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-sticky.html" >
+                          Navbar sticky
+                        </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…" aria-label="Search in website">
+                  </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 ms-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 ms-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 me-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 ms-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 me-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 ms-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 ms-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" rel="noopener">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 &copy; 2021
+                    <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-beta</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <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>
+  </body>
+</html>

demo/colors.html

@@ -0,0 +1,674 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 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>Colors - 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"/>
+  </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-bs-toggle="collapse" data-bs-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item dropdown d-none d-md-flex me-3">
+              <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                <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-end 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-bs-toggle="dropdown" aria-label="Open user menu">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end 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-bs-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">
+                      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="./accordion.html" >
+                          Accordion
+                        </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="./colors.html" >
+                          Colors
+                        </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="./map-fullsize.html" >
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html" >
+                          Vector maps
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html" >
+                          Navigation
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./charts.html" >
+                          Charts
+                        </a>
+                        <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="./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="./page-headers.html" >
+                          Page headers
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html" >
+                          Markdown
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-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="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-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-bs-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-bs-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-transparent.html" >
+                          Vertical transparent
+                        </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-sticky.html" >
+                          Navbar sticky
+                        </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…" aria-label="Search in website">
+                  </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">
+                  Colors
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="card">
+            <div class="card-body">
+              <div class="table-responsive">
+                <table class="table text-center">
+                  <tr>
+                    <td>
+                      <div class="avatar text-white bg-blue" data-demo-color>bl
+                      </div>
+                    </td>
+                    <td>
+                      <div class="avatar text-white bg-azure" data-demo-color>az
+                      </div>
+                    </td>
+                    <td>
+                      <div class="avatar text-white bg-indigo" data-demo-color>in
+                      </div>
+                    </td>
+                    <td>
+                      <div class="avatar text-white bg-purple" data-demo-color>pu
+                      </div>
+                    </td>
+                    <td>
+                      <div class="avatar text-white bg-pink" data-demo-color>pi
+                      </div>
+                    </td>
+                    <td>
+                      <div class="avatar text-white bg-red" data-demo-color>re
+                      </div>
+                    </td>
+                    <td>
+                      <div class="avatar text-white bg-orange" data-demo-color>or
+                      </div>
+                    </td>
+                    <td>
+                      <div class="avatar text-white bg-yellow" data-demo-color>ye
+                      </div>
+                    </td>
+                    <td>
+                      <div class="avatar text-white bg-lime" data-demo-color>li
+                      </div>
+                    </td>
+                    <td>
+                      <div class="avatar text-white bg-green" data-demo-color>gr
+                      </div>
+                    </td>
+                    <td>
+                      <div class="avatar text-white bg-teal" data-demo-color>te
+                      </div>
+                    </td>
+                    <td>
+                      <div class="avatar text-white bg-cyan" data-demo-color>cy
+                      </div>
+                    </td>
+                    <td>
+                      <div class="avatar text-white bg-dark" data-demo-color>da
+                      </div>
+                    </td>
+                    <td>
+                      <div class="avatar text-white bg-muted" data-demo-color>mu
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <div class="avatar bg-blue-lt" data-demo-color>bl</div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-azure-lt" data-demo-color>az</div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-indigo-lt" data-demo-color>in</div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-purple-lt" data-demo-color>pu</div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-pink-lt" data-demo-color>pi</div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-red-lt" data-demo-color>re</div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-orange-lt" data-demo-color>or</div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-yellow-lt" data-demo-color>ye</div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-lime-lt" data-demo-color>li</div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-green-lt" data-demo-color>gr</div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-teal-lt" data-demo-color>te</div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-cyan-lt" data-demo-color>cy</div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-dark-lt" data-demo-color>da</div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-muted-lt" data-demo-color>mu</div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <div class="avatar text-blue bg-white" data-demo-color>bl</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-azure bg-white" data-demo-color>az</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-indigo bg-white" data-demo-color>in</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-purple bg-white" data-demo-color>pu</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-pink bg-white" data-demo-color>pi</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-red bg-white" data-demo-color>re</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-orange bg-white" data-demo-color>or</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-yellow bg-white" data-demo-color>ye</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-lime bg-white" data-demo-color>li</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-green bg-white" data-demo-color>gr</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-teal bg-white" data-demo-color>te</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-cyan bg-white" data-demo-color>cy</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-dark bg-white" data-demo-color>da</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-muted bg-white" data-demo-color>mu</div>
+                    </td>
+                  </tr>
+                  <tr class="bg-light">
+                    <td>
+                      <div class="avatar text-blue bg-light" data-demo-color>bl</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-azure bg-light" data-demo-color>az</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-indigo bg-light" data-demo-color>in</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-purple bg-light" data-demo-color>pu</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-pink bg-light" data-demo-color>pi</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-red bg-light" data-demo-color>re</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-orange bg-light" data-demo-color>or</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-yellow bg-light" data-demo-color>ye</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-lime bg-light" data-demo-color>li</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-green bg-light" data-demo-color>gr</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-teal bg-light" data-demo-color>te</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-cyan bg-light" data-demo-color>cy</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-dark bg-light" data-demo-color>da</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-muted bg-light" data-demo-color>mu</div>
+                    </td>
+                  </tr>
+                  <tr class="bg-dark text-white">
+                    <td>
+                      <div class="avatar text-blue bg-dark" data-demo-color>bl</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-azure bg-dark" data-demo-color>az</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-indigo bg-dark" data-demo-color>in</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-purple bg-dark" data-demo-color>pu</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-pink bg-dark" data-demo-color>pi</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-red bg-dark" data-demo-color>re</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-orange bg-dark" data-demo-color>or</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-yellow bg-dark" data-demo-color>ye</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-lime bg-dark" data-demo-color>li</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-green bg-dark" data-demo-color>gr</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-teal bg-dark" data-demo-color>te</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-cyan bg-dark" data-demo-color>cy</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-white bg-dark" data-demo-color>wh</div>
+                    </td>
+                    <td>
+                      <div class="avatar text-muted bg-dark" data-demo-color>mu</div>
+                    </td>
+                  </tr>
+                  <tr class="bg-dark text-white">
+                    <td>
+                      <div class="avatar bg-blue-lt" data-demo-color>bl</div>
+                      <div class="mt-2" data-demo-color-contrast></div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-azure-lt" data-demo-color>az</div>
+                      <div class="mt-2" data-demo-color-contrast></div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-indigo-lt" data-demo-color>in</div>
+                      <div class="mt-2" data-demo-color-contrast></div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-purple-lt" data-demo-color>pu</div>
+                      <div class="mt-2" data-demo-color-contrast></div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-pink-lt" data-demo-color>pi</div>
+                      <div class="mt-2" data-demo-color-contrast></div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-red-lt" data-demo-color>re</div>
+                      <div class="mt-2" data-demo-color-contrast></div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-orange-lt" data-demo-color>or</div>
+                      <div class="mt-2" data-demo-color-contrast></div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-yellow-lt" data-demo-color>ye</div>
+                      <div class="mt-2" data-demo-color-contrast></div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-lime-lt" data-demo-color>li</div>
+                      <div class="mt-2" data-demo-color-contrast></div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-green-lt" data-demo-color>gr</div>
+                      <div class="mt-2" data-demo-color-contrast></div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-teal-lt" data-demo-color>te</div>
+                      <div class="mt-2" data-demo-color-contrast></div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-cyan-lt" data-demo-color>cy</div>
+                      <div class="mt-2" data-demo-color-contrast></div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-white-lt" data-demo-color>wh</div>
+                      <div class="mt-2" data-demo-color-contrast></div>
+                    </td>
+                    <td>
+                      <div class="avatar bg-muted-lt" data-demo-color>mu</div>
+                      <div class="mt-2" data-demo-color-contrast></div>
+                    </td>
+                  </tr>
+                </table>
+              </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 ms-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" rel="noopener">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 &copy; 2021
+                    <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-beta</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js"></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,14 +0,0 @@
-<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>

demo/components/card-comments.html

@@ -1,94 +0,0 @@
-<div class="card">
-  <div class="card-header">
-    <div class="card-title">Comments</div>
-  </div>
-  <div class="card-body">
-    <div class="d-flex mb-5">
-      <div class="mr-4">
-        <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)">
-          <span class="badge bg-green"></span></span>
-      </div>
-      <div class="flex-fill">
-        <div class="d-flex mt-n1">
-          <h5 class="m-0">
-            Paweł Kuna
-          </h5>
-          <div class="ml-auto small text-muted">1 week ago</div>
-        </div>
-        <p class="mb-2">
-          This is PERFECT
-        </p>
-        <div class="small">
-          <span class="text-success mr-1">+47</span>
-          <a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="18 15 12 9 6 15"></polyline></svg>
-          </a>
-          <a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
-          </a>
-          <span class="mr-1">·</span>
-          <a href="#" class="mr-1 text-muted">Reply</a>
-          <span class="mr-1">·</span>
-          <a href="#" class="text-muted">Edit</a>
-        </div>
-      </div>
-    </div>
-    <div class="d-flex mb-5">
-      <div class="mr-4">
-        <span class="avatar">
-          <span class="badge bg-green"></span>JL</span>
-      </div>
-      <div class="flex-fill">
-        <div class="d-flex mt-n1">
-          <h5 class="m-0">
-            Jeffie Lewzey
-          </h5>
-          <div class="ml-auto small text-muted">1 week and 4 days ago</div>
-        </div>
-        <p class="mb-2">
-          She is so damn beautiful OMG i love her!!! does somebody knows what kind of music is this? sorry xD
-        </p>
-        <div class="small">
-          <span class="text-success mr-1">+45</span>
-          <a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="18 15 12 9 6 15"></polyline></svg>
-          </a>
-          <a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
-          </a>
-          <span class="mr-1">·</span>
-          <a href="#" class="mr-1 text-muted">Reply</a>
-          <span class="mr-1">·</span>
-          <a href="#" class="text-muted">Edit</a>
-        </div>
-      </div>
-    </div>
-    <div class="d-flex">
-      <div class="mr-4">
-        <span class="avatar" style="background-image: url(../static/avatars/002m.jpg)">
-          <span class="badge bg-green"></span></span>
-      </div>
-      <div class="flex-fill">
-        <div class="d-flex mt-n1">
-          <h5 class="m-0">
-            Mallory Hulme
-          </h5>
-          <div class="ml-auto small text-muted">2 days ago</div>
-        </div>
-        <p class="mb-2">
-          Did anyone go camping in Oshkosh Wisconsin last month?
-        </p>
-        <div class="small">
-          <span class="text-success mr-1">+32</span>
-          <a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="18 15 12 9 6 15"></polyline></svg>
-          </a>
-          <a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
-          </a>
-          <span class="mr-1">·</span>
-          <a href="#" class="mr-1 text-muted">Reply</a>
-          <span class="mr-1">·</span>
-          <a href="#" class="text-muted">Edit</a>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

demo/components/card-ribbon.html

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

demo/components/card-tabs-bottom.html

@@ -1,48 +0,0 @@
-<!-- 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>

demo/components/card-with-image.html

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

demo/components/empty.html

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

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

demo/components/input-image.html

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

demo/components/progress.html

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

demo/components/simple-avatar.html

@@ -1,2 +0,0 @@
-<span class="avatar" style="background-image: url(../static/avatars/000m.jpg)">
-  <span class="badge bg-green"></span></span>

demo/components/simple-card.html

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

demo/components/widget-revenue.html

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

demo/components/widget-sales.html

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

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-beta (https://tabler.io)
+* @version 1.0.0-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 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.6875rem;
-  background: #354052;
-  border-radius: 3px;
-  color: #ffffff; }
+  font-size: 85.7142857%;
+  border-radius: 4px; }
   pre.highlight::-webkit-scrollbar,
   .highlight pre::-webkit-scrollbar {
     width: 6px;
@@ -25,37 +22,169 @@ pre.highlight,
   pre.highlight::-webkit-scrollbar-thumb,
   .highlight pre::-webkit-scrollbar-thumb {
     border-radius: 5px;
-    background: transparent; }
+    background: #a0a6ae; }
+  pre.highlight::-webkit-scrollbar-track,
+  .highlight pre::-webkit-scrollbar-track {
+    background: #e7eaef; }
   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: #a0a6ae; }
 
-.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 +198,24 @@ 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-content .page-header {
+    margin-bottom: 0; }
 
 .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 +226,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 +243,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,20 +259,72 @@ pre.highlight,
 body.no-transitions * {
   transition: none !important; }
 
-.toc-entry:before {
-  content: '- '; }
-
-.toc-entry ul {
-  list-style: none;
-  padding-left: 1rem; }
-
-.toc-entry a {
-  color: #868c97; }
-
 .dropdown-menu-demo {
   display: inline-block;
   width: 100%;
   position: relative;
   top: 0;
   margin-bottom: 1rem; }
-/*# sourceMappingURL=demo.css.map */
+
+.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; } }
+
+.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/demo.rtl.css

@@ -0,0 +1,330 @@
+/*!
+* Tabler v1.0.0-beta (https://tabler.io)
+* @version 1.0.0-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 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: 85.7142857%;
+  border-radius: 4px; }
+  pre.highlight::-webkit-scrollbar,
+  .highlight pre::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    -webkit-transition: .3s background;
+    transition: .3s background; }
+  pre.highlight::-webkit-scrollbar-thumb,
+  .highlight pre::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: #a0a6ae; }
+  pre.highlight::-webkit-scrollbar-track,
+  .highlight pre::-webkit-scrollbar-track {
+    background: #e7eaef; }
+  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: #a0a6ae; }
+
+.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 #e6e8e9;
+  border-radius: 3px 3px 0 0;
+  position: relative;
+  min-height: 12rem;
+  display: flex;
+  align-items: center;
+  overflow-x: auto; }
+
+.example-centered {
+  justify-content: center; }
+  .example-centered .example-content {
+    flex: 0 auto; }
+
+.example-content {
+  font-size: 0.875rem;
+  line-height: 1.4285714;
+  color: #232e3c;
+  flex: 1;
+  max-width: 100%; }
+  .example-content .page-header {
+    margin-bottom: 0; }
+
+.example-bg {
+  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; }
+
+.example-column {
+  margin: 0 auto; }
+  .example-column > .card:last-of-type {
+    margin-bottom: 0; }
+
+.example-column-1 {
+  max-width: 26rem; }
+
+.example-column-2 {
+  max-width: 52rem; }
+
+.example-modal-backdrop {
+  background: #232e3c;
+  opacity: 0.24;
+  position: absolute;
+  width: 100%;
+  right: 0;
+  top: 0;
+  height: 100%;
+  border-radius: 2px 2px 0 0; }
+
+@media not print {
+  .theme-dark .example-code {
+    border: 1px solid #e6e8e9;
+    border-top: none; } }
+
+@media not print and (prefers-color-scheme: dark) {
+  .theme-dark-auto .example-code {
+    border: 1px solid #e6e8e9;
+    border-top: none; } }
+
+.card-sponsor {
+  background: #dbe7f6 no-repeat center/100% 100%;
+  border-color: #548ed2;
+  min-height: 316px; }
+
+body.no-transitions * {
+  transition: none !important; }
+
+.dropdown-menu-demo {
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  top: 0;
+  margin-bottom: 1rem; }
+
+.demo-icon-preview {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0; }
+  .demo-icon-preview svg,
+  .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; } }
+
+.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 0 -1px -2px;
+  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-left: 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-beta (https://tabler.io)
+* @version 1.0.0-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 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-xs {
+  width: 1.25rem;
+  height: 0.9375rem; }
+
+.flag-sm {
+  width: 2rem;
+  height: 1.5rem; }
+
 .flag-md {
-  width: 2.66666rem;
-  height: 2rem; }
+  width: 3.75rem;
+  height: 2.8125rem; }
 
 .flag-lg {
-  width: 3.99999rem;
-  height: 3rem; }
+  width: 5rem;
+  height: 3.75rem; }
 
 .flag-xl {
-  width: 5.33332rem;
-  height: 4rem; }
-/*# sourceMappingURL=tabler-flags.css.map */
+  width: 7rem;
+  height: 5.25rem; }

demo/dist/css/tabler-flags.rtl.css

@@ -0,0 +1,807 @@
+/*!
+* Tabler v1.0.0-beta (https://tabler.io)
+* @version 1.0.0-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+.flag {
+  position: relative;
+  display: inline-block;
+  width: 1.33333em;
+  height: 1em;
+  vertical-align: -3px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  border: 1px solid #e6e8e9;
+  border-radius: 3px; }
+
+.flag-country-ad {
+  background-image: url("../img/flags/ad.svg"); }
+
+.flag-country-ae {
+  background-image: url("../img/flags/ae.svg"); }
+
+.flag-country-af {
+  background-image: url("../img/flags/af.svg"); }
+
+.flag-country-ag {
+  background-image: url("../img/flags/ag.svg"); }
+
+.flag-country-ai {
+  background-image: url("../img/flags/ai.svg"); }
+
+.flag-country-al {
+  background-image: url("../img/flags/al.svg"); }
+
+.flag-country-am {
+  background-image: url("../img/flags/am.svg"); }
+
+.flag-country-ao {
+  background-image: url("../img/flags/ao.svg"); }
+
+.flag-country-aq {
+  background-image: url("../img/flags/aq.svg"); }
+
+.flag-country-ar {
+  background-image: url("../img/flags/ar.svg"); }
+
+.flag-country-as {
+  background-image: url("../img/flags/as.svg"); }
+
+.flag-country-at {
+  background-image: url("../img/flags/at.svg"); }
+
+.flag-country-au {
+  background-image: url("../img/flags/au.svg"); }
+
+.flag-country-aw {
+  background-image: url("../img/flags/aw.svg"); }
+
+.flag-country-ax {
+  background-image: url("../img/flags/ax.svg"); }
+
+.flag-country-az {
+  background-image: url("../img/flags/az.svg"); }
+
+.flag-country-ba {
+  background-image: url("../img/flags/ba.svg"); }
+
+.flag-country-bb {
+  background-image: url("../img/flags/bb.svg"); }
+
+.flag-country-bd {
+  background-image: url("../img/flags/bd.svg"); }
+
+.flag-country-be {
+  background-image: url("../img/flags/be.svg"); }
+
+.flag-country-bf {
+  background-image: url("../img/flags/bf.svg"); }
+
+.flag-country-bg {
+  background-image: url("../img/flags/bg.svg"); }
+
+.flag-country-bh {
+  background-image: url("../img/flags/bh.svg"); }
+
+.flag-country-bi {
+  background-image: url("../img/flags/bi.svg"); }
+
+.flag-country-bj {
+  background-image: url("../img/flags/bj.svg"); }
+
+.flag-country-bl {
+  background-image: url("../img/flags/bl.svg"); }
+
+.flag-country-bm {
+  background-image: url("../img/flags/bm.svg"); }
+
+.flag-country-bn {
+  background-image: url("../img/flags/bn.svg"); }
+
+.flag-country-bo {
+  background-image: url("../img/flags/bo.svg"); }
+
+.flag-country-bq {
+  background-image: url("../img/flags/bq.svg"); }
+
+.flag-country-br {
+  background-image: url("../img/flags/br.svg"); }
+
+.flag-country-bs {
+  background-image: url("../img/flags/bs.svg"); }
+
+.flag-country-bt {
+  background-image: url("../img/flags/bt.svg"); }
+
+.flag-country-bv {
+  background-image: url("../img/flags/bv.svg"); }
+
+.flag-country-bw {
+  background-image: url("../img/flags/bw.svg"); }
+
+.flag-country-by {
+  background-image: url("../img/flags/by.svg"); }
+
+.flag-country-bz {
+  background-image: url("../img/flags/bz.svg"); }
+
+.flag-country-ca {
+  background-image: url("../img/flags/ca.svg"); }
+
+.flag-country-cc {
+  background-image: url("../img/flags/cc.svg"); }
+
+.flag-country-cd {
+  background-image: url("../img/flags/cd.svg"); }
+
+.flag-country-cf {
+  background-image: url("../img/flags/cf.svg"); }
+
+.flag-country-cg {
+  background-image: url("../img/flags/cg.svg"); }
+
+.flag-country-ch {
+  background-image: url("../img/flags/ch.svg"); }
+
+.flag-country-ci {
+  background-image: url("../img/flags/ci.svg"); }
+
+.flag-country-ck {
+  background-image: url("../img/flags/ck.svg"); }
+
+.flag-country-cl {
+  background-image: url("../img/flags/cl.svg"); }
+
+.flag-country-cm {
+  background-image: url("../img/flags/cm.svg"); }
+
+.flag-country-cn {
+  background-image: url("../img/flags/cn.svg"); }
+
+.flag-country-co {
+  background-image: url("../img/flags/co.svg"); }
+
+.flag-country-cr {
+  background-image: url("../img/flags/cr.svg"); }
+
+.flag-country-cu {
+  background-image: url("../img/flags/cu.svg"); }
+
+.flag-country-cv {
+  background-image: url("../img/flags/cv.svg"); }
+
+.flag-country-cw {
+  background-image: url("../img/flags/cw.svg"); }
+
+.flag-country-cx {
+  background-image: url("../img/flags/cx.svg"); }
+
+.flag-country-cy {
+  background-image: url("../img/flags/cy.svg"); }
+
+.flag-country-cz {
+  background-image: url("../img/flags/cz.svg"); }
+
+.flag-country-de {
+  background-image: url("../img/flags/de.svg"); }
+
+.flag-country-dj {
+  background-image: url("../img/flags/dj.svg"); }
+
+.flag-country-dk {
+  background-image: url("../img/flags/dk.svg"); }
+
+.flag-country-dm {
+  background-image: url("../img/flags/dm.svg"); }
+
+.flag-country-do {
+  background-image: url("../img/flags/do.svg"); }
+
+.flag-country-dz {
+  background-image: url("../img/flags/dz.svg"); }
+
+.flag-country-ec {
+  background-image: url("../img/flags/ec.svg"); }
+
+.flag-country-ee {
+  background-image: url("../img/flags/ee.svg"); }
+
+.flag-country-eg {
+  background-image: url("../img/flags/eg.svg"); }
+
+.flag-country-eh {
+  background-image: url("../img/flags/eh.svg"); }
+
+.flag-country-er {
+  background-image: url("../img/flags/er.svg"); }
+
+.flag-country-es {
+  background-image: url("../img/flags/es.svg"); }
+
+.flag-country-et {
+  background-image: url("../img/flags/et.svg"); }
+
+.flag-country-fi {
+  background-image: url("../img/flags/fi.svg"); }
+
+.flag-country-fj {
+  background-image: url("../img/flags/fj.svg"); }
+
+.flag-country-fk {
+  background-image: url("../img/flags/fk.svg"); }
+
+.flag-country-fm {
+  background-image: url("../img/flags/fm.svg"); }
+
+.flag-country-fo {
+  background-image: url("../img/flags/fo.svg"); }
+
+.flag-country-fr {
+  background-image: url("../img/flags/fr.svg"); }
+
+.flag-country-ga {
+  background-image: url("../img/flags/ga.svg"); }
+
+.flag-country-gb {
+  background-image: url("../img/flags/gb.svg"); }
+
+.flag-country-gd {
+  background-image: url("../img/flags/gd.svg"); }
+
+.flag-country-ge {
+  background-image: url("../img/flags/ge.svg"); }
+
+.flag-country-gf {
+  background-image: url("../img/flags/gf.svg"); }
+
+.flag-country-gg {
+  background-image: url("../img/flags/gg.svg"); }
+
+.flag-country-gh {
+  background-image: url("../img/flags/gh.svg"); }
+
+.flag-country-gi {
+  background-image: url("../img/flags/gi.svg"); }
+
+.flag-country-gl {
+  background-image: url("../img/flags/gl.svg"); }
+
+.flag-country-gm {
+  background-image: url("../img/flags/gm.svg"); }
+
+.flag-country-gn {
+  background-image: url("../img/flags/gn.svg"); }
+
+.flag-country-gp {
+  background-image: url("../img/flags/gp.svg"); }
+
+.flag-country-gq {
+  background-image: url("../img/flags/gq.svg"); }
+
+.flag-country-gr {
+  background-image: url("../img/flags/gr.svg"); }
+
+.flag-country-gs {
+  background-image: url("../img/flags/gs.svg"); }
+
+.flag-country-gt {
+  background-image: url("../img/flags/gt.svg"); }
+
+.flag-country-gu {
+  background-image: url("../img/flags/gu.svg"); }
+
+.flag-country-gw {
+  background-image: url("../img/flags/gw.svg"); }
+
+.flag-country-gy {
+  background-image: url("../img/flags/gy.svg"); }
+
+.flag-country-hk {
+  background-image: url("../img/flags/hk.svg"); }
+
+.flag-country-hm {
+  background-image: url("../img/flags/hm.svg"); }
+
+.flag-country-hn {
+  background-image: url("../img/flags/hn.svg"); }
+
+.flag-country-hr {
+  background-image: url("../img/flags/hr.svg"); }
+
+.flag-country-ht {
+  background-image: url("../img/flags/ht.svg"); }
+
+.flag-country-hu {
+  background-image: url("../img/flags/hu.svg"); }
+
+.flag-country-id {
+  background-image: url("../img/flags/id.svg"); }
+
+.flag-country-ie {
+  background-image: url("../img/flags/ie.svg"); }
+
+.flag-country-il {
+  background-image: url("../img/flags/il.svg"); }
+
+.flag-country-im {
+  background-image: url("../img/flags/im.svg"); }
+
+.flag-country-in {
+  background-image: url("../img/flags/in.svg"); }
+
+.flag-country-io {
+  background-image: url("../img/flags/io.svg"); }
+
+.flag-country-iq {
+  background-image: url("../img/flags/iq.svg"); }
+
+.flag-country-ir {
+  background-image: url("../img/flags/ir.svg"); }
+
+.flag-country-is {
+  background-image: url("../img/flags/is.svg"); }
+
+.flag-country-it {
+  background-image: url("../img/flags/it.svg"); }
+
+.flag-country-je {
+  background-image: url("../img/flags/je.svg"); }
+
+.flag-country-jm {
+  background-image: url("../img/flags/jm.svg"); }
+
+.flag-country-jo {
+  background-image: url("../img/flags/jo.svg"); }
+
+.flag-country-jp {
+  background-image: url("../img/flags/jp.svg"); }
+
+.flag-country-ke {
+  background-image: url("../img/flags/ke.svg"); }
+
+.flag-country-kg {
+  background-image: url("../img/flags/kg.svg"); }
+
+.flag-country-kh {
+  background-image: url("../img/flags/kh.svg"); }
+
+.flag-country-ki {
+  background-image: url("../img/flags/ki.svg"); }
+
+.flag-country-km {
+  background-image: url("../img/flags/km.svg"); }
+
+.flag-country-kn {
+  background-image: url("../img/flags/kn.svg"); }
+
+.flag-country-kp {
+  background-image: url("../img/flags/kp.svg"); }
+
+.flag-country-kr {
+  background-image: url("../img/flags/kr.svg"); }
+
+.flag-country-kw {
+  background-image: url("../img/flags/kw.svg"); }
+
+.flag-country-ky {
+  background-image: url("../img/flags/ky.svg"); }
+
+.flag-country-kz {
+  background-image: url("../img/flags/kz.svg"); }
+
+.flag-country-la {
+  background-image: url("../img/flags/la.svg"); }
+
+.flag-country-lb {
+  background-image: url("../img/flags/lb.svg"); }
+
+.flag-country-lc {
+  background-image: url("../img/flags/lc.svg"); }
+
+.flag-country-li {
+  background-image: url("../img/flags/li.svg"); }
+
+.flag-country-lk {
+  background-image: url("../img/flags/lk.svg"); }
+
+.flag-country-lr {
+  background-image: url("../img/flags/lr.svg"); }
+
+.flag-country-ls {
+  background-image: url("../img/flags/ls.svg"); }
+
+.flag-country-lt {
+  background-image: url("../img/flags/lt.svg"); }
+
+.flag-country-lu {
+  background-image: url("../img/flags/lu.svg"); }
+
+.flag-country-lv {
+  background-image: url("../img/flags/lv.svg"); }
+
+.flag-country-ly {
+  background-image: url("../img/flags/ly.svg"); }
+
+.flag-country-ma {
+  background-image: url("../img/flags/ma.svg"); }
+
+.flag-country-mc {
+  background-image: url("../img/flags/mc.svg"); }
+
+.flag-country-md {
+  background-image: url("../img/flags/md.svg"); }
+
+.flag-country-me {
+  background-image: url("../img/flags/me.svg"); }
+
+.flag-country-mf {
+  background-image: url("../img/flags/mf.svg"); }
+
+.flag-country-mg {
+  background-image: url("../img/flags/mg.svg"); }
+
+.flag-country-mh {
+  background-image: url("../img/flags/mh.svg"); }
+
+.flag-country-mk {
+  background-image: url("../img/flags/mk.svg"); }
+
+.flag-country-ml {
+  background-image: url("../img/flags/ml.svg"); }
+
+.flag-country-mm {
+  background-image: url("../img/flags/mm.svg"); }
+
+.flag-country-mn {
+  background-image: url("../img/flags/mn.svg"); }
+
+.flag-country-mo {
+  background-image: url("../img/flags/mo.svg"); }
+
+.flag-country-mp {
+  background-image: url("../img/flags/mp.svg"); }
+
+.flag-country-mq {
+  background-image: url("../img/flags/mq.svg"); }
+
+.flag-country-mr {
+  background-image: url("../img/flags/mr.svg"); }
+
+.flag-country-ms {
+  background-image: url("../img/flags/ms.svg"); }
+
+.flag-country-mt {
+  background-image: url("../img/flags/mt.svg"); }
+
+.flag-country-mu {
+  background-image: url("../img/flags/mu.svg"); }
+
+.flag-country-mv {
+  background-image: url("../img/flags/mv.svg"); }
+
+.flag-country-mw {
+  background-image: url("../img/flags/mw.svg"); }
+
+.flag-country-mx {
+  background-image: url("../img/flags/mx.svg"); }
+
+.flag-country-my {
+  background-image: url("../img/flags/my.svg"); }
+
+.flag-country-mz {
+  background-image: url("../img/flags/mz.svg"); }
+
+.flag-country-na {
+  background-image: url("../img/flags/na.svg"); }
+
+.flag-country-nc {
+  background-image: url("../img/flags/nc.svg"); }
+
+.flag-country-ne {
+  background-image: url("../img/flags/ne.svg"); }
+
+.flag-country-nf {
+  background-image: url("../img/flags/nf.svg"); }
+
+.flag-country-ng {
+  background-image: url("../img/flags/ng.svg"); }
+
+.flag-country-ni {
+  background-image: url("../img/flags/ni.svg"); }
+
+.flag-country-nl {
+  background-image: url("../img/flags/nl.svg"); }
+
+.flag-country-no {
+  background-image: url("../img/flags/no.svg"); }
+
+.flag-country-np {
+  background-image: url("../img/flags/np.svg"); }
+
+.flag-country-nr {
+  background-image: url("../img/flags/nr.svg"); }
+
+.flag-country-nu {
+  background-image: url("../img/flags/nu.svg"); }
+
+.flag-country-nz {
+  background-image: url("../img/flags/nz.svg"); }
+
+.flag-country-om {
+  background-image: url("../img/flags/om.svg"); }
+
+.flag-country-pa {
+  background-image: url("../img/flags/pa.svg"); }
+
+.flag-country-pe {
+  background-image: url("../img/flags/pe.svg"); }
+
+.flag-country-pf {
+  background-image: url("../img/flags/pf.svg"); }
+
+.flag-country-pg {
+  background-image: url("../img/flags/pg.svg"); }
+
+.flag-country-ph {
+  background-image: url("../img/flags/ph.svg"); }
+
+.flag-country-pk {
+  background-image: url("../img/flags/pk.svg"); }
+
+.flag-country-pl {
+  background-image: url("../img/flags/pl.svg"); }
+
+.flag-country-pm {
+  background-image: url("../img/flags/pm.svg"); }
+
+.flag-country-pn {
+  background-image: url("../img/flags/pn.svg"); }
+
+.flag-country-pr {
+  background-image: url("../img/flags/pr.svg"); }
+
+.flag-country-ps {
+  background-image: url("../img/flags/ps.svg"); }
+
+.flag-country-pt {
+  background-image: url("../img/flags/pt.svg"); }
+
+.flag-country-pw {
+  background-image: url("../img/flags/pw.svg"); }
+
+.flag-country-py {
+  background-image: url("../img/flags/py.svg"); }
+
+.flag-country-qa {
+  background-image: url("../img/flags/qa.svg"); }
+
+.flag-country-re {
+  background-image: url("../img/flags/re.svg"); }
+
+.flag-country-ro {
+  background-image: url("../img/flags/ro.svg"); }
+
+.flag-country-rs {
+  background-image: url("../img/flags/rs.svg"); }
+
+.flag-country-ru {
+  background-image: url("../img/flags/ru.svg"); }
+
+.flag-country-rw {
+  background-image: url("../img/flags/rw.svg"); }
+
+.flag-country-sa {
+  background-image: url("../img/flags/sa.svg"); }
+
+.flag-country-sb {
+  background-image: url("../img/flags/sb.svg"); }
+
+.flag-country-sc {
+  background-image: url("../img/flags/sc.svg"); }
+
+.flag-country-sd {
+  background-image: url("../img/flags/sd.svg"); }
+
+.flag-country-se {
+  background-image: url("../img/flags/se.svg"); }
+
+.flag-country-sg {
+  background-image: url("../img/flags/sg.svg"); }
+
+.flag-country-sh {
+  background-image: url("../img/flags/sh.svg"); }
+
+.flag-country-si {
+  background-image: url("../img/flags/si.svg"); }
+
+.flag-country-sj {
+  background-image: url("../img/flags/sj.svg"); }
+
+.flag-country-sk {
+  background-image: url("../img/flags/sk.svg"); }
+
+.flag-country-sl {
+  background-image: url("../img/flags/sl.svg"); }
+
+.flag-country-sm {
+  background-image: url("../img/flags/sm.svg"); }
+
+.flag-country-sn {
+  background-image: url("../img/flags/sn.svg"); }
+
+.flag-country-so {
+  background-image: url("../img/flags/so.svg"); }
+
+.flag-country-sr {
+  background-image: url("../img/flags/sr.svg"); }
+
+.flag-country-ss {
+  background-image: url("../img/flags/ss.svg"); }
+
+.flag-country-st {
+  background-image: url("../img/flags/st.svg"); }
+
+.flag-country-sv {
+  background-image: url("../img/flags/sv.svg"); }
+
+.flag-country-sx {
+  background-image: url("../img/flags/sx.svg"); }
+
+.flag-country-sy {
+  background-image: url("../img/flags/sy.svg"); }
+
+.flag-country-sz {
+  background-image: url("../img/flags/sz.svg"); }
+
+.flag-country-tc {
+  background-image: url("../img/flags/tc.svg"); }
+
+.flag-country-td {
+  background-image: url("../img/flags/td.svg"); }
+
+.flag-country-tf {
+  background-image: url("../img/flags/tf.svg"); }
+
+.flag-country-tg {
+  background-image: url("../img/flags/tg.svg"); }
+
+.flag-country-th {
+  background-image: url("../img/flags/th.svg"); }
+
+.flag-country-tj {
+  background-image: url("../img/flags/tj.svg"); }
+
+.flag-country-tk {
+  background-image: url("../img/flags/tk.svg"); }
+
+.flag-country-tl {
+  background-image: url("../img/flags/tl.svg"); }
+
+.flag-country-tm {
+  background-image: url("../img/flags/tm.svg"); }
+
+.flag-country-tn {
+  background-image: url("../img/flags/tn.svg"); }
+
+.flag-country-to {
+  background-image: url("../img/flags/to.svg"); }
+
+.flag-country-tr {
+  background-image: url("../img/flags/tr.svg"); }
+
+.flag-country-tt {
+  background-image: url("../img/flags/tt.svg"); }
+
+.flag-country-tv {
+  background-image: url("../img/flags/tv.svg"); }
+
+.flag-country-tw {
+  background-image: url("../img/flags/tw.svg"); }
+
+.flag-country-tz {
+  background-image: url("../img/flags/tz.svg"); }
+
+.flag-country-ua {
+  background-image: url("../img/flags/ua.svg"); }
+
+.flag-country-ug {
+  background-image: url("../img/flags/ug.svg"); }
+
+.flag-country-um {
+  background-image: url("../img/flags/um.svg"); }
+
+.flag-country-us {
+  background-image: url("../img/flags/us.svg"); }
+
+.flag-country-uy {
+  background-image: url("../img/flags/uy.svg"); }
+
+.flag-country-uz {
+  background-image: url("../img/flags/uz.svg"); }
+
+.flag-country-va {
+  background-image: url("../img/flags/va.svg"); }
+
+.flag-country-vc {
+  background-image: url("../img/flags/vc.svg"); }
+
+.flag-country-ve {
+  background-image: url("../img/flags/ve.svg"); }
+
+.flag-country-vg {
+  background-image: url("../img/flags/vg.svg"); }
+
+.flag-country-vi {
+  background-image: url("../img/flags/vi.svg"); }
+
+.flag-country-vn {
+  background-image: url("../img/flags/vn.svg"); }
+
+.flag-country-vu {
+  background-image: url("../img/flags/vu.svg"); }
+
+.flag-country-wf {
+  background-image: url("../img/flags/wf.svg"); }
+
+.flag-country-ws {
+  background-image: url("../img/flags/ws.svg"); }
+
+.flag-country-ye {
+  background-image: url("../img/flags/ye.svg"); }
+
+.flag-country-yt {
+  background-image: url("../img/flags/yt.svg"); }
+
+.flag-country-za {
+  background-image: url("../img/flags/za.svg"); }
+
+.flag-country-zm {
+  background-image: url("../img/flags/zm.svg"); }
+
+.flag-country-zw {
+  background-image: url("../img/flags/zw.svg"); }
+
+.flag-country-es-ct {
+  background-image: url("../img/flags/es-ct.svg"); }
+
+.flag-country-eu {
+  background-image: url("../img/flags/eu.svg"); }
+
+.flag-country-gb-eng {
+  background-image: url("../img/flags/gb-eng.svg"); }
+
+.flag-country-gb-nir {
+  background-image: url("../img/flags/gb-nir.svg"); }
+
+.flag-country-gb-sct {
+  background-image: url("../img/flags/gb-sct.svg"); }
+
+.flag-country-gb-wls {
+  background-image: url("../img/flags/gb-wls.svg"); }
+
+.flag-country-un {
+  background-image: url("../img/flags/un.svg"); }
+
+.flag-xs {
+  width: 1.25rem;
+  height: 0.9375rem; }
+
+.flag-sm {
+  width: 2rem;
+  height: 1.5rem; }
+
+.flag-md {
+  width: 3.75rem;
+  height: 2.8125rem; }
+
+.flag-lg {
+  width: 5rem;
+  height: 3.75rem; }
+
+.flag-xl {
+  width: 7rem;
+  height: 5.25rem; }

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-beta (https://tabler.io)
+* @version 1.0.0-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 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-payments.rtl.css

@@ -0,0 +1,391 @@
+/*!
+* Tabler v1.0.0-beta (https://tabler.io)
+* @version 1.0.0-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+.payment {
+  width: 3.33332rem;
+  height: 2rem;
+  display: inline-block;
+  background: no-repeat center/100% 100%;
+  vertical-align: bottom;
+  font-style: normal;
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
+  border-radius: 2px; }
+
+.payment-provider-2checkout {
+  background-image: url("../img/payments/2checkout.svg"); }
+
+.payment-provider-2checkout-dark {
+  background-image: url("../img/payments/2checkout-dark.svg"); }
+
+.payment-provider-alipay {
+  background-image: url("../img/payments/alipay.svg"); }
+
+.payment-provider-alipay-dark {
+  background-image: url("../img/payments/alipay-dark.svg"); }
+
+.payment-provider-amazon {
+  background-image: url("../img/payments/amazon.svg"); }
+
+.payment-provider-amazon-dark {
+  background-image: url("../img/payments/amazon-dark.svg"); }
+
+.payment-provider-americanexpress {
+  background-image: url("../img/payments/americanexpress.svg"); }
+
+.payment-provider-americanexpress-dark {
+  background-image: url("../img/payments/americanexpress-dark.svg"); }
+
+.payment-provider-applepay {
+  background-image: url("../img/payments/applepay.svg"); }
+
+.payment-provider-applepay-dark {
+  background-image: url("../img/payments/applepay-dark.svg"); }
+
+.payment-provider-bancontact {
+  background-image: url("../img/payments/bancontact.svg"); }
+
+.payment-provider-bancontact-dark {
+  background-image: url("../img/payments/bancontact-dark.svg"); }
+
+.payment-provider-bitcoin {
+  background-image: url("../img/payments/bitcoin.svg"); }
+
+.payment-provider-bitcoin-dark {
+  background-image: url("../img/payments/bitcoin-dark.svg"); }
+
+.payment-provider-bitpay {
+  background-image: url("../img/payments/bitpay.svg"); }
+
+.payment-provider-bitpay-dark {
+  background-image: url("../img/payments/bitpay-dark.svg"); }
+
+.payment-provider-blik {
+  background-image: url("../img/payments/blik.svg"); }
+
+.payment-provider-blik-dark {
+  background-image: url("../img/payments/blik-dark.svg"); }
+
+.payment-provider-cirrus {
+  background-image: url("../img/payments/cirrus.svg"); }
+
+.payment-provider-cirrus-dark {
+  background-image: url("../img/payments/cirrus-dark.svg"); }
+
+.payment-provider-clickandbuy {
+  background-image: url("../img/payments/clickandbuy.svg"); }
+
+.payment-provider-clickandbuy-dark {
+  background-image: url("../img/payments/clickandbuy-dark.svg"); }
+
+.payment-provider-coinkite {
+  background-image: url("../img/payments/coinkite.svg"); }
+
+.payment-provider-coinkite-dark {
+  background-image: url("../img/payments/coinkite-dark.svg"); }
+
+.payment-provider-dinersclub {
+  background-image: url("../img/payments/dinersclub.svg"); }
+
+.payment-provider-dinersclub-dark {
+  background-image: url("../img/payments/dinersclub-dark.svg"); }
+
+.payment-provider-directdebit {
+  background-image: url("../img/payments/directdebit.svg"); }
+
+.payment-provider-directdebit-dark {
+  background-image: url("../img/payments/directdebit-dark.svg"); }
+
+.payment-provider-discover {
+  background-image: url("../img/payments/discover.svg"); }
+
+.payment-provider-discover-dark {
+  background-image: url("../img/payments/discover-dark.svg"); }
+
+.payment-provider-dotpay {
+  background-image: url("../img/payments/dotpay.svg"); }
+
+.payment-provider-dotpay-dark {
+  background-image: url("../img/payments/dotpay-dark.svg"); }
+
+.payment-provider-dwolla {
+  background-image: url("../img/payments/dwolla.svg"); }
+
+.payment-provider-dwolla-dark {
+  background-image: url("../img/payments/dwolla-dark.svg"); }
+
+.payment-provider-ebay {
+  background-image: url("../img/payments/ebay.svg"); }
+
+.payment-provider-ebay-dark {
+  background-image: url("../img/payments/ebay-dark.svg"); }
+
+.payment-provider-eway {
+  background-image: url("../img/payments/eway.svg"); }
+
+.payment-provider-eway-dark {
+  background-image: url("../img/payments/eway-dark.svg"); }
+
+.payment-provider-giropay {
+  background-image: url("../img/payments/giropay.svg"); }
+
+.payment-provider-giropay-dark {
+  background-image: url("../img/payments/giropay-dark.svg"); }
+
+.payment-provider-googlewallet {
+  background-image: url("../img/payments/googlewallet.svg"); }
+
+.payment-provider-googlewallet-dark {
+  background-image: url("../img/payments/googlewallet-dark.svg"); }
+
+.payment-provider-ingenico {
+  background-image: url("../img/payments/ingenico.svg"); }
+
+.payment-provider-ingenico-dark {
+  background-image: url("../img/payments/ingenico-dark.svg"); }
+
+.payment-provider-jcb {
+  background-image: url("../img/payments/jcb.svg"); }
+
+.payment-provider-jcb-dark {
+  background-image: url("../img/payments/jcb-dark.svg"); }
+
+.payment-provider-klarna {
+  background-image: url("../img/payments/klarna.svg"); }
+
+.payment-provider-klarna-dark {
+  background-image: url("../img/payments/klarna-dark.svg"); }
+
+.payment-provider-laser {
+  background-image: url("../img/payments/laser.svg"); }
+
+.payment-provider-laser-dark {
+  background-image: url("../img/payments/laser-dark.svg"); }
+
+.payment-provider-maestro {
+  background-image: url("../img/payments/maestro.svg"); }
+
+.payment-provider-maestro-dark {
+  background-image: url("../img/payments/maestro-dark.svg"); }
+
+.payment-provider-mastercard {
+  background-image: url("../img/payments/mastercard.svg"); }
+
+.payment-provider-mastercard-dark {
+  background-image: url("../img/payments/mastercard-dark.svg"); }
+
+.payment-provider-mir {
+  background-image: url("../img/payments/mir.svg"); }
+
+.payment-provider-mir-dark {
+  background-image: url("../img/payments/mir-dark.svg"); }
+
+.payment-provider-monero {
+  background-image: url("../img/payments/monero.svg"); }
+
+.payment-provider-monero-dark {
+  background-image: url("../img/payments/monero-dark.svg"); }
+
+.payment-provider-neteller {
+  background-image: url("../img/payments/neteller.svg"); }
+
+.payment-provider-neteller-dark {
+  background-image: url("../img/payments/neteller-dark.svg"); }
+
+.payment-provider-ogone {
+  background-image: url("../img/payments/ogone.svg"); }
+
+.payment-provider-ogone-dark {
+  background-image: url("../img/payments/ogone-dark.svg"); }
+
+.payment-provider-okpay {
+  background-image: url("../img/payments/okpay.svg"); }
+
+.payment-provider-okpay-dark {
+  background-image: url("../img/payments/okpay-dark.svg"); }
+
+.payment-provider-paybox {
+  background-image: url("../img/payments/paybox.svg"); }
+
+.payment-provider-paybox-dark {
+  background-image: url("../img/payments/paybox-dark.svg"); }
+
+.payment-provider-paymill {
+  background-image: url("../img/payments/paymill.svg"); }
+
+.payment-provider-paymill-dark {
+  background-image: url("../img/payments/paymill-dark.svg"); }
+
+.payment-provider-payone {
+  background-image: url("../img/payments/payone.svg"); }
+
+.payment-provider-payone-dark {
+  background-image: url("../img/payments/payone-dark.svg"); }
+
+.payment-provider-payoneer {
+  background-image: url("../img/payments/payoneer.svg"); }
+
+.payment-provider-payoneer-dark {
+  background-image: url("../img/payments/payoneer-dark.svg"); }
+
+.payment-provider-paypal {
+  background-image: url("../img/payments/paypal.svg"); }
+
+.payment-provider-paypal-dark {
+  background-image: url("../img/payments/paypal-dark.svg"); }
+
+.payment-provider-paysafecard {
+  background-image: url("../img/payments/paysafecard.svg"); }
+
+.payment-provider-paysafecard-dark {
+  background-image: url("../img/payments/paysafecard-dark.svg"); }
+
+.payment-provider-payu {
+  background-image: url("../img/payments/payu.svg"); }
+
+.payment-provider-payu-dark {
+  background-image: url("../img/payments/payu-dark.svg"); }
+
+.payment-provider-payza {
+  background-image: url("../img/payments/payza.svg"); }
+
+.payment-provider-payza-dark {
+  background-image: url("../img/payments/payza-dark.svg"); }
+
+.payment-provider-przelewy24 {
+  background-image: url("../img/payments/przelewy24.svg"); }
+
+.payment-provider-przelewy24-dark {
+  background-image: url("../img/payments/przelewy24-dark.svg"); }
+
+.payment-provider-ripple {
+  background-image: url("../img/payments/ripple.svg"); }
+
+.payment-provider-ripple-dark {
+  background-image: url("../img/payments/ripple-dark.svg"); }
+
+.payment-provider-sage {
+  background-image: url("../img/payments/sage.svg"); }
+
+.payment-provider-sage-dark {
+  background-image: url("../img/payments/sage-dark.svg"); }
+
+.payment-provider-sepa {
+  background-image: url("../img/payments/sepa.svg"); }
+
+.payment-provider-sepa-dark {
+  background-image: url("../img/payments/sepa-dark.svg"); }
+
+.payment-provider-shopify {
+  background-image: url("../img/payments/shopify.svg"); }
+
+.payment-provider-shopify-dark {
+  background-image: url("../img/payments/shopify-dark.svg"); }
+
+.payment-provider-skrill {
+  background-image: url("../img/payments/skrill.svg"); }
+
+.payment-provider-skrill-dark {
+  background-image: url("../img/payments/skrill-dark.svg"); }
+
+.payment-provider-solo {
+  background-image: url("../img/payments/solo.svg"); }
+
+.payment-provider-solo-dark {
+  background-image: url("../img/payments/solo-dark.svg"); }
+
+.payment-provider-square {
+  background-image: url("../img/payments/square.svg"); }
+
+.payment-provider-square-dark {
+  background-image: url("../img/payments/square-dark.svg"); }
+
+.payment-provider-stripe {
+  background-image: url("../img/payments/stripe.svg"); }
+
+.payment-provider-stripe-dark {
+  background-image: url("../img/payments/stripe-dark.svg"); }
+
+.payment-provider-switch {
+  background-image: url("../img/payments/switch.svg"); }
+
+.payment-provider-switch-dark {
+  background-image: url("../img/payments/switch-dark.svg"); }
+
+.payment-provider-tpay {
+  background-image: url("../img/payments/tpay.svg"); }
+
+.payment-provider-tpay-dark {
+  background-image: url("../img/payments/tpay-dark.svg"); }
+
+.payment-provider-ukash {
+  background-image: url("../img/payments/ukash.svg"); }
+
+.payment-provider-ukash-dark {
+  background-image: url("../img/payments/ukash-dark.svg"); }
+
+.payment-provider-unionpay {
+  background-image: url("../img/payments/unionpay.svg"); }
+
+.payment-provider-unionpay-dark {
+  background-image: url("../img/payments/unionpay-dark.svg"); }
+
+.payment-provider-verifone {
+  background-image: url("../img/payments/verifone.svg"); }
+
+.payment-provider-verifone-dark {
+  background-image: url("../img/payments/verifone-dark.svg"); }
+
+.payment-provider-verisign {
+  background-image: url("../img/payments/verisign.svg"); }
+
+.payment-provider-verisign-dark {
+  background-image: url("../img/payments/verisign-dark.svg"); }
+
+.payment-provider-visa {
+  background-image: url("../img/payments/visa.svg"); }
+
+.payment-provider-visa-dark {
+  background-image: url("../img/payments/visa-dark.svg"); }
+
+.payment-provider-webmoney {
+  background-image: url("../img/payments/webmoney.svg"); }
+
+.payment-provider-webmoney-dark {
+  background-image: url("../img/payments/webmoney-dark.svg"); }
+
+.payment-provider-westernunion {
+  background-image: url("../img/payments/westernunion.svg"); }
+
+.payment-provider-westernunion-dark {
+  background-image: url("../img/payments/westernunion-dark.svg"); }
+
+.payment-provider-worldpay {
+  background-image: url("../img/payments/worldpay.svg"); }
+
+.payment-provider-worldpay-dark {
+  background-image: url("../img/payments/worldpay-dark.svg"); }
+
+.payment-xs {
+  width: 2.083325rem;
+  height: 1.25rem; }
+
+.payment-sm {
+  width: 3.33332rem;
+  height: 2rem; }
+
+.payment-md {
+  width: 6.249975rem;
+  height: 3.75rem; }
+
+.payment-lg {
+  width: 8.3333rem;
+  height: 5rem; }
+
+.payment-xl {
+  width: 11.66662rem;
+  height: 7rem; }

demo/dist/css/tabler-vendors.css

@@ -0,0 +1,772 @@
+/*!
+* Tabler v1.0.0-beta (https://tabler.io)
+* @version 1.0.0-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+.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; }
+
+/*! nouislider - 14.6.3 - 11/19/2020 */
+/* Functional styling;
+ * These styles are required for noUiSlider to function.
+ * You don't need to change these rules to apply your design.
+ */
+.noUi-target,
+.noUi-target * {
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-user-select: none;
+  touch-action: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  box-sizing: border-box; }
+
+.noUi-target {
+  position: relative; }
+
+.noUi-base,
+.noUi-connects {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1; }
+
+/* Wrapper for all connect elements.
+ */
+.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%; }
+
+/* Offset direction
+ */
+.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
+  left: 0;
+  right: auto; }
+
+/* Give origins 0 height/width so they don't interfere with clicking the
+ * connect elements.
+ */
+.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 {
+  transition: transform 0.3s; }
+
+.noUi-state-drag * {
+  cursor: inherit !important; }
+
+/* Slider size and handle placement;
+ */
+.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; }
+
+/* Styling;
+ * Giving the connect element a border radius causes issues with using transform: scale
+ */
+.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; }
+
+/* Handles and cursors;
+ */
+.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; }
+
+/* Handle stripes;
+ */
+.noUi-handle:before,
+.noUi-handle:after {
+  content: "";
+  display: block;
+  position: absolute;
+  height: 14px;
+  width: 1px;
+  background: #E8E7E6;
+  left: 14px;
+  top: 6px; }
+
+.noUi-handle:after {
+  left: 17px; }
+
+.noUi-vertical .noUi-handle:before,
+.noUi-vertical .noUi-handle:after {
+  width: 14px;
+  height: 1px;
+  left: 6px;
+  top: 14px; }
+
+.noUi-vertical .noUi-handle:after {
+  top: 17px; }
+
+/* Disabled state;
+ */
+[disabled] .noUi-connect {
+  background: #B8B8B8; }
+
+[disabled].noUi-target,
+[disabled].noUi-handle,
+[disabled] .noUi-handle {
+  cursor: not-allowed; }
+
+/* Base;
+ *
+ */
+.noUi-pips,
+.noUi-pips * {
+  box-sizing: border-box; }
+
+.noUi-pips {
+  position: absolute;
+  color: #999; }
+
+/* Values;
+ *
+ */
+.noUi-value {
+  position: absolute;
+  white-space: nowrap;
+  text-align: center; }
+
+.noUi-value-sub {
+  color: #ccc;
+  font-size: 10px; }
+
+/* Markings;
+ *
+ */
+.noUi-marker {
+  position: absolute;
+  background: #CCC; }
+
+.noUi-marker-sub {
+  background: #AAA; }
+
+.noUi-marker-large {
+  background: #AAA; }
+
+/* Horizontal layout;
+ *
+ */
+.noUi-pips-horizontal {
+  padding: 10px 0;
+  height: 80px;
+  top: 100%;
+  left: 0;
+  width: 100%; }
+
+.noUi-value-horizontal {
+  transform: translate(-50%, 50%); }
+
+.noUi-rtl .noUi-value-horizontal {
+  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; }
+
+/* Vertical layout;
+ *
+ */
+.noUi-pips-vertical {
+  padding: 0 10px;
+  height: 100%;
+  top: 0;
+  left: 100%; }
+
+.noUi-value-vertical {
+  transform: translate(0, -50%);
+  padding-left: 25px; }
+
+.noUi-rtl .noUi-value-vertical {
+  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 {
+  transform: translate(-50%, 0);
+  left: 50%;
+  bottom: 120%; }
+
+.noUi-vertical .noUi-tooltip {
+  transform: translate(0, -50%);
+  top: 50%;
+  right: 120%; }
+
+.noUi-horizontal .noUi-origin > .noUi-tooltip {
+  transform: translate(50%, 0);
+  left: auto;
+  bottom: 10px; }
+
+.noUi-vertical .noUi-origin > .noUi-tooltip {
+  transform: translate(0, -18px);
+  top: auto;
+  right: 28px; }
+
+.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; }
+
+.litepicker {
+  --litepicker-month-weekday-color: #656d77;
+  --litepicker-button-prev-month-color: #656d77;
+  --litepicker-button-next-month-color: #656d77;
+  --litepicker-button-prev-month-color-hover: #206bc4;
+  --litepicker-button-next-month-color-hover: #206bc4;
+  --litepicker-day-color-hover: #206bc4;
+  --litepicker-is-end-color-bg: #206bc4;
+  --litepicker-is-today-color: #206bc4;
+  font: inherit;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none; }
+  .litepicker svg {
+    fill: none !important; }
+  .litepicker .container__months {
+    border: 1px solid rgba(101, 109, 119, 0.16);
+    border-radius: 4px;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
+    .litepicker .container__months .month-item-name,
+    .litepicker .container__months .month-item-year {
+      font-weight: 500 !important; }
+    .litepicker .container__months .button-next-month,
+    .litepicker .container__months .button-prev-month {
+      cursor: pointer !important; }
+    .litepicker .container__months .month-item-weekdays-row > div {
+      padding: .5rem 0 !important;
+      font-size: 0.75rem; }
+  .litepicker .container__days .day-item {
+    cursor: pointer !important;
+    padding: .5rem 0 !important;
+    transition: .3s color, .3s background-color, .3s border-color; }
+  .datepicker-inline .litepicker .container__months {
+    box-shadow: none; }
+
+/*===============================
+=            Choices            =
+===============================*/
+.choices {
+  position: relative;
+  margin-bottom: 24px;
+  font-size: 16px; }
+
+.choices:focus {
+  outline: none; }
+
+.choices:last-child {
+  margin-bottom: 0; }
+
+.choices.is-disabled .choices__inner,
+.choices.is-disabled .choices__input {
+  background-color: #eaeaea;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+       user-select: none; }
+
+.choices.is-disabled .choices__item {
+  cursor: not-allowed; }
+
+.choices [hidden] {
+  display: none !important; }
+
+.choices[data-type*='select-one'] {
+  cursor: pointer; }
+
+.choices[data-type*='select-one'] .choices__inner {
+  padding-bottom: 7.5px; }
+
+.choices[data-type*='select-one'] .choices__input {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  border-bottom: 1px solid #dddddd;
+  background-color: #ffffff;
+  margin: 0; }
+
+.choices[data-type*='select-one'] .choices__button {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
+  padding: 0;
+  background-size: 8px;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  margin-top: -10px;
+  margin-right: 25px;
+  height: 20px;
+  width: 20px;
+  border-radius: 10em;
+  opacity: 0.5; }
+
+.choices[data-type*='select-one'] .choices__button:hover, .choices[data-type*='select-one'] .choices__button:focus {
+  opacity: 1; }
+
+.choices[data-type*='select-one'] .choices__button:focus {
+  box-shadow: 0px 0px 0px 2px #00bcd4; }
+
+.choices[data-type*='select-one'] .choices__item[data-value=''] .choices__button {
+  display: none; }
+
+.choices[data-type*='select-one']:after {
+  content: '';
+  height: 0;
+  width: 0;
+  border-style: solid;
+  border-color: #333333 transparent transparent transparent;
+  border-width: 5px;
+  position: absolute;
+  right: 11.5px;
+  top: 50%;
+  margin-top: -2.5px;
+  pointer-events: none; }
+
+.choices[data-type*='select-one'].is-open:after {
+  border-color: transparent transparent #333333 transparent;
+  margin-top: -7.5px; }
+
+.choices[data-type*='select-one'][dir='rtl']:after {
+  left: 11.5px;
+  right: auto; }
+
+.choices[data-type*='select-one'][dir='rtl'] .choices__button {
+  right: auto;
+  left: 0;
+  margin-left: 25px;
+  margin-right: 0; }
+
+.choices[data-type*='select-multiple'] .choices__inner,
+.choices[data-type*='text'] .choices__inner {
+  cursor: text; }
+
+.choices[data-type*='select-multiple'] .choices__button,
+.choices[data-type*='text'] .choices__button {
+  position: relative;
+  display: inline-block;
+  margin-top: 0;
+  margin-right: -4px;
+  margin-bottom: 0;
+  margin-left: 8px;
+  padding-left: 16px;
+  border-left: 1px solid #008fa1;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
+  background-size: 8px;
+  width: 8px;
+  line-height: 1;
+  opacity: 0.75;
+  border-radius: 0; }
+
+.choices[data-type*='select-multiple'] .choices__button:hover, .choices[data-type*='select-multiple'] .choices__button:focus,
+.choices[data-type*='text'] .choices__button:hover,
+.choices[data-type*='text'] .choices__button:focus {
+  opacity: 1; }
+
+.choices__inner {
+  display: inline-block;
+  vertical-align: top;
+  width: 100%;
+  background-color: #f9f9f9;
+  padding: 7.5px 7.5px 3.75px;
+  border: 1px solid #dddddd;
+  border-radius: 2.5px;
+  font-size: 14px;
+  min-height: 44px;
+  overflow: hidden; }
+
+.is-focused .choices__inner,
+.is-open .choices__inner {
+  border-color: #b7b7b7; }
+
+.is-open .choices__inner {
+  border-radius: 2.5px 2.5px 0 0; }
+
+.is-flipped.is-open .choices__inner {
+  border-radius: 0 0 2.5px 2.5px; }
+
+.choices__list {
+  margin: 0;
+  padding-left: 0;
+  list-style: none; }
+
+.choices__list--single {
+  display: inline-block;
+  padding: 4px 16px 4px 4px;
+  width: 100%; }
+
+[dir='rtl'] .choices__list--single {
+  padding-right: 4px;
+  padding-left: 16px; }
+
+.choices__list--single .choices__item {
+  width: 100%; }
+
+.choices__list--multiple {
+  display: inline; }
+
+.choices__list--multiple .choices__item {
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 20px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  margin-right: 3.75px;
+  margin-bottom: 3.75px;
+  background-color: #00bcd4;
+  border: 1px solid #00a5bb;
+  color: #ffffff;
+  word-break: break-all;
+  box-sizing: border-box; }
+
+.choices__list--multiple .choices__item[data-deletable] {
+  padding-right: 5px; }
+
+[dir='rtl'] .choices__list--multiple .choices__item {
+  margin-right: 0;
+  margin-left: 3.75px; }
+
+.choices__list--multiple .choices__item.is-highlighted {
+  background-color: #00a5bb;
+  border: 1px solid #008fa1; }
+
+.is-disabled .choices__list--multiple .choices__item {
+  background-color: #aaaaaa;
+  border: 1px solid #919191; }
+
+.choices__list--dropdown {
+  visibility: hidden;
+  z-index: 1;
+  position: absolute;
+  width: 100%;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  top: 100%;
+  margin-top: -1px;
+  border-bottom-left-radius: 2.5px;
+  border-bottom-right-radius: 2.5px;
+  overflow: hidden;
+  word-break: break-all;
+  will-change: visibility; }
+
+.choices__list--dropdown.is-active {
+  visibility: visible; }
+
+.is-open .choices__list--dropdown {
+  border-color: #b7b7b7; }
+
+.is-flipped .choices__list--dropdown {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: -1px;
+  border-radius: 0.25rem 0.25rem 0 0; }
+
+.choices__list--dropdown .choices__list {
+  position: relative;
+  max-height: 300px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  will-change: scroll-position; }
+
+.choices__list--dropdown .choices__item {
+  position: relative;
+  padding: 10px;
+  font-size: 14px; }
+
+[dir='rtl'] .choices__list--dropdown .choices__item {
+  text-align: right; }
+
+@media (min-width: 640px) {
+  .choices__list--dropdown .choices__item--selectable {
+    padding-right: 100px; }
+  .choices__list--dropdown .choices__item--selectable:after {
+    content: attr(data-select-text);
+    font-size: 12px;
+    opacity: 0;
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%); }
+  [dir='rtl'] .choices__list--dropdown .choices__item--selectable {
+    text-align: right;
+    padding-left: 100px;
+    padding-right: 10px; }
+  [dir='rtl'] .choices__list--dropdown .choices__item--selectable:after {
+    right: auto;
+    left: 10px; } }
+
+.choices__list--dropdown .choices__item--selectable.is-highlighted {
+  background-color: #f2f2f2; }
+
+.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
+  opacity: 0.5; }
+
+.choices__item {
+  cursor: default; }
+
+.choices__item--selectable {
+  cursor: pointer; }
+
+.choices__item--disabled {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+       user-select: none;
+  opacity: 0.5; }
+
+.choices__heading {
+  font-weight: 600;
+  font-size: 12px;
+  padding: 10px;
+  border-bottom: 1px solid #f7f7f7;
+  color: gray; }
+
+.choices__button {
+  text-indent: -9999px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: 0;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer; }
+
+.choices__button:focus {
+  outline: none; }
+
+.choices__input {
+  display: inline-block;
+  vertical-align: baseline;
+  background-color: #f9f9f9;
+  font-size: 14px;
+  margin-bottom: 5px;
+  border: 0;
+  border-radius: 0;
+  max-width: 100%;
+  padding: 4px 0 4px 2px; }
+
+.choices__input:focus {
+  outline: 0; }
+
+[dir='rtl'] .choices__input {
+  padding-right: 2px;
+  padding-left: 0; }
+
+.choices__placeholder {
+  opacity: 0.5; }
+
+/*=====  End of Choices  ======*/
+.choices {
+  margin: 0;
+  font-size: inherit;
+  position: relative;
+  cursor: pointer; }
+  .choices:focus {
+    outline: none; }
+  .choices:after {
+    content: none !important; }
+  .choices.is-focused .form-select {
+    border-color: #90b5e2;
+    box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
+  .choices .dropdown-menu {
+    width: 100%;
+    height: auto; }
+    .choices .dropdown-menu .choices__list {
+      max-height: 13rem;
+      overflow-x: hidden; }
+    .choices .dropdown-menu .dropdown-item {
+      padding-left: 0.75rem;
+      padding-right: 0.75rem; }
+      .choices .dropdown-menu .dropdown-item.active {
+        background: transparent;
+        color: inherit; }
+      .choices .dropdown-menu .dropdown-item.is-highlighted {
+        color: #206bc4;
+        background-color: rgba(32, 107, 196, 0.06); }
+
+.choices__placeholder {
+  color: #a7abb1;
+  opacity: 1; }
+
+.choices__list--single {
+  padding: 0; }
+
+.choices__list--dropdown .choices__item--selectable:after {
+  content: none; }

demo/dist/css/tabler-vendors.rtl.css

@@ -0,0 +1,772 @@
+/*!
+* Tabler v1.0.0-beta (https://tabler.io)
+* @version 1.0.0-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+.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; }
+
+/*! nouislider - 14.6.3 - 11/19/2020 */
+/* Functional styling;
+ * These styles are required for noUiSlider to function.
+ * You don't need to change these rules to apply your design.
+ */
+.noUi-target,
+.noUi-target * {
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-user-select: none;
+  touch-action: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  box-sizing: border-box; }
+
+.noUi-target {
+  position: relative; }
+
+.noUi-base,
+.noUi-connects {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1; }
+
+/* Wrapper for all connect elements.
+ */
+.noUi-connects {
+  overflow: hidden;
+  z-index: 0; }
+
+.noUi-connect,
+.noUi-origin {
+  will-change: transform;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  -ms-transform-origin: 100% 0;
+  -webkit-transform-origin: 100% 0;
+  -webkit-transform-style: preserve-3d;
+  transform-origin: 100% 0;
+  transform-style: flat; }
+
+.noUi-connect {
+  height: 100%;
+  width: 100%; }
+
+.noUi-origin {
+  height: 10%;
+  width: 10%; }
+
+/* Offset direction
+ */
+.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
+  right: 0;
+  left: auto; }
+
+/* Give origins 0 height/width so they don't interfere with clicking the
+ * connect elements.
+ */
+.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 {
+  transition: transform 0.3s; }
+
+.noUi-state-drag * {
+  cursor: inherit !important; }
+
+/* Slider size and handle placement;
+ */
+.noUi-horizontal {
+  height: 18px; }
+
+.noUi-horizontal .noUi-handle {
+  width: 34px;
+  height: 28px;
+  left: -17px;
+  top: -6px; }
+
+.noUi-vertical {
+  width: 18px; }
+
+.noUi-vertical .noUi-handle {
+  width: 28px;
+  height: 34px;
+  left: -6px;
+  top: -17px; }
+
+.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
+  right: -17px;
+  left: auto; }
+
+/* Styling;
+ * Giving the connect element a border radius causes issues with using transform: scale
+ */
+.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; }
+
+/* Handles and cursors;
+ */
+.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; }
+
+/* Handle stripes;
+ */
+.noUi-handle:before,
+.noUi-handle:after {
+  content: "";
+  display: block;
+  position: absolute;
+  height: 14px;
+  width: 1px;
+  background: #E8E7E6;
+  right: 14px;
+  top: 6px; }
+
+.noUi-handle:after {
+  right: 17px; }
+
+.noUi-vertical .noUi-handle:before,
+.noUi-vertical .noUi-handle:after {
+  width: 14px;
+  height: 1px;
+  right: 6px;
+  top: 14px; }
+
+.noUi-vertical .noUi-handle:after {
+  top: 17px; }
+
+/* Disabled state;
+ */
+[disabled] .noUi-connect {
+  background: #B8B8B8; }
+
+[disabled].noUi-target,
+[disabled].noUi-handle,
+[disabled] .noUi-handle {
+  cursor: not-allowed; }
+
+/* Base;
+ *
+ */
+.noUi-pips,
+.noUi-pips * {
+  box-sizing: border-box; }
+
+.noUi-pips {
+  position: absolute;
+  color: #999; }
+
+/* Values;
+ *
+ */
+.noUi-value {
+  position: absolute;
+  white-space: nowrap;
+  text-align: center; }
+
+.noUi-value-sub {
+  color: #ccc;
+  font-size: 10px; }
+
+/* Markings;
+ *
+ */
+.noUi-marker {
+  position: absolute;
+  background: #CCC; }
+
+.noUi-marker-sub {
+  background: #AAA; }
+
+.noUi-marker-large {
+  background: #AAA; }
+
+/* Horizontal layout;
+ *
+ */
+.noUi-pips-horizontal {
+  padding: 10px 0;
+  height: 80px;
+  top: 100%;
+  right: 0;
+  width: 100%; }
+
+.noUi-value-horizontal {
+  transform: translate(50%, 50%); }
+
+.noUi-rtl .noUi-value-horizontal {
+  transform: translate(-50%, 50%); }
+
+.noUi-marker-horizontal.noUi-marker {
+  margin-right: -1px;
+  width: 2px;
+  height: 5px; }
+
+.noUi-marker-horizontal.noUi-marker-sub {
+  height: 10px; }
+
+.noUi-marker-horizontal.noUi-marker-large {
+  height: 15px; }
+
+/* Vertical layout;
+ *
+ */
+.noUi-pips-vertical {
+  padding: 0 10px;
+  height: 100%;
+  top: 0;
+  right: 100%; }
+
+.noUi-value-vertical {
+  transform: translate(0, -50%);
+  padding-right: 25px; }
+
+.noUi-rtl .noUi-value-vertical {
+  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 {
+  transform: translate(50%, 0);
+  right: 50%;
+  bottom: 120%; }
+
+.noUi-vertical .noUi-tooltip {
+  transform: translate(0, -50%);
+  top: 50%;
+  left: 120%; }
+
+.noUi-horizontal .noUi-origin > .noUi-tooltip {
+  transform: translate(-50%, 0);
+  right: auto;
+  bottom: 10px; }
+
+.noUi-vertical .noUi-origin > .noUi-tooltip {
+  transform: translate(0, -18px);
+  top: auto;
+  left: 28px; }
+
+.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;
+    left: -0.5rem;
+    margin: 1px 0 0 1px; }
+  .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; }
+
+.litepicker {
+  --litepicker-month-weekday-color: #656d77;
+  --litepicker-button-prev-month-color: #656d77;
+  --litepicker-button-next-month-color: #656d77;
+  --litepicker-button-prev-month-color-hover: #206bc4;
+  --litepicker-button-next-month-color-hover: #206bc4;
+  --litepicker-day-color-hover: #206bc4;
+  --litepicker-is-end-color-bg: #206bc4;
+  --litepicker-is-today-color: #206bc4;
+  font: inherit;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none; }
+  .litepicker svg {
+    fill: none !important; }
+  .litepicker .container__months {
+    border: 1px solid rgba(101, 109, 119, 0.16);
+    border-radius: 4px;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
+    .litepicker .container__months .month-item-name,
+    .litepicker .container__months .month-item-year {
+      font-weight: 500 !important; }
+    .litepicker .container__months .button-next-month,
+    .litepicker .container__months .button-prev-month {
+      cursor: pointer !important; }
+    .litepicker .container__months .month-item-weekdays-row > div {
+      padding: .5rem 0 !important;
+      font-size: 0.75rem; }
+  .litepicker .container__days .day-item {
+    cursor: pointer !important;
+    padding: .5rem 0 !important;
+    transition: .3s color, .3s background-color, .3s border-color; }
+  .datepicker-inline .litepicker .container__months {
+    box-shadow: none; }
+
+/*===============================
+=            Choices            =
+===============================*/
+.choices {
+  position: relative;
+  margin-bottom: 24px;
+  font-size: 16px; }
+
+.choices:focus {
+  outline: none; }
+
+.choices:last-child {
+  margin-bottom: 0; }
+
+.choices.is-disabled .choices__inner,
+.choices.is-disabled .choices__input {
+  background-color: #eaeaea;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+       user-select: none; }
+
+.choices.is-disabled .choices__item {
+  cursor: not-allowed; }
+
+.choices [hidden] {
+  display: none !important; }
+
+.choices[data-type*='select-one'] {
+  cursor: pointer; }
+
+.choices[data-type*='select-one'] .choices__inner {
+  padding-bottom: 7.5px; }
+
+.choices[data-type*='select-one'] .choices__input {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  border-bottom: 1px solid #dddddd;
+  background-color: #ffffff;
+  margin: 0; }
+
+.choices[data-type*='select-one'] .choices__button {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
+  padding: 0;
+  background-size: 8px;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  margin-top: -10px;
+  margin-left: 25px;
+  height: 20px;
+  width: 20px;
+  border-radius: 10em;
+  opacity: 0.5; }
+
+.choices[data-type*='select-one'] .choices__button:hover, .choices[data-type*='select-one'] .choices__button:focus {
+  opacity: 1; }
+
+.choices[data-type*='select-one'] .choices__button:focus {
+  box-shadow: 0px 0px 0px 2px #00bcd4; }
+
+.choices[data-type*='select-one'] .choices__item[data-value=''] .choices__button {
+  display: none; }
+
+.choices[data-type*='select-one']:after {
+  content: '';
+  height: 0;
+  width: 0;
+  border-style: solid;
+  border-color: #333333 transparent transparent transparent;
+  border-width: 5px;
+  position: absolute;
+  left: 11.5px;
+  top: 50%;
+  margin-top: -2.5px;
+  pointer-events: none; }
+
+.choices[data-type*='select-one'].is-open:after {
+  border-color: transparent transparent #333333 transparent;
+  margin-top: -7.5px; }
+
+.choices[data-type*='select-one'][dir='rtl']:after {
+  right: 11.5px;
+  left: auto; }
+
+.choices[data-type*='select-one'][dir='rtl'] .choices__button {
+  left: auto;
+  right: 0;
+  margin-right: 25px;
+  margin-left: 0; }
+
+.choices[data-type*='select-multiple'] .choices__inner,
+.choices[data-type*='text'] .choices__inner {
+  cursor: text; }
+
+.choices[data-type*='select-multiple'] .choices__button,
+.choices[data-type*='text'] .choices__button {
+  position: relative;
+  display: inline-block;
+  margin-top: 0;
+  margin-left: -4px;
+  margin-bottom: 0;
+  margin-right: 8px;
+  padding-right: 16px;
+  border-right: 1px solid #008fa1;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
+  background-size: 8px;
+  width: 8px;
+  line-height: 1;
+  opacity: 0.75;
+  border-radius: 0; }
+
+.choices[data-type*='select-multiple'] .choices__button:hover, .choices[data-type*='select-multiple'] .choices__button:focus,
+.choices[data-type*='text'] .choices__button:hover,
+.choices[data-type*='text'] .choices__button:focus {
+  opacity: 1; }
+
+.choices__inner {
+  display: inline-block;
+  vertical-align: top;
+  width: 100%;
+  background-color: #f9f9f9;
+  padding: 7.5px 7.5px 3.75px;
+  border: 1px solid #dddddd;
+  border-radius: 2.5px;
+  font-size: 14px;
+  min-height: 44px;
+  overflow: hidden; }
+
+.is-focused .choices__inner,
+.is-open .choices__inner {
+  border-color: #b7b7b7; }
+
+.is-open .choices__inner {
+  border-radius: 2.5px 2.5px 0 0; }
+
+.is-flipped.is-open .choices__inner {
+  border-radius: 0 0 2.5px 2.5px; }
+
+.choices__list {
+  margin: 0;
+  padding-right: 0;
+  list-style: none; }
+
+.choices__list--single {
+  display: inline-block;
+  padding: 4px 4px 4px 16px;
+  width: 100%; }
+
+[dir='rtl'] .choices__list--single {
+  padding-left: 4px;
+  padding-right: 16px; }
+
+.choices__list--single .choices__item {
+  width: 100%; }
+
+.choices__list--multiple {
+  display: inline; }
+
+.choices__list--multiple .choices__item {
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 20px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  margin-left: 3.75px;
+  margin-bottom: 3.75px;
+  background-color: #00bcd4;
+  border: 1px solid #00a5bb;
+  color: #ffffff;
+  word-break: break-all;
+  box-sizing: border-box; }
+
+.choices__list--multiple .choices__item[data-deletable] {
+  padding-left: 5px; }
+
+[dir='rtl'] .choices__list--multiple .choices__item {
+  margin-left: 0;
+  margin-right: 3.75px; }
+
+.choices__list--multiple .choices__item.is-highlighted {
+  background-color: #00a5bb;
+  border: 1px solid #008fa1; }
+
+.is-disabled .choices__list--multiple .choices__item {
+  background-color: #aaaaaa;
+  border: 1px solid #919191; }
+
+.choices__list--dropdown {
+  visibility: hidden;
+  z-index: 1;
+  position: absolute;
+  width: 100%;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  top: 100%;
+  margin-top: -1px;
+  border-bottom-right-radius: 2.5px;
+  border-bottom-left-radius: 2.5px;
+  overflow: hidden;
+  word-break: break-all;
+  will-change: visibility; }
+
+.choices__list--dropdown.is-active {
+  visibility: visible; }
+
+.is-open .choices__list--dropdown {
+  border-color: #b7b7b7; }
+
+.is-flipped .choices__list--dropdown {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: -1px;
+  border-radius: 0.25rem 0.25rem 0 0; }
+
+.choices__list--dropdown .choices__list {
+  position: relative;
+  max-height: 300px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  will-change: scroll-position; }
+
+.choices__list--dropdown .choices__item {
+  position: relative;
+  padding: 10px;
+  font-size: 14px; }
+
+[dir='rtl'] .choices__list--dropdown .choices__item {
+  text-align: left; }
+
+@media (min-width: 640px) {
+  .choices__list--dropdown .choices__item--selectable {
+    padding-left: 100px; }
+  .choices__list--dropdown .choices__item--selectable:after {
+    content: attr(data-select-text);
+    font-size: 12px;
+    opacity: 0;
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    transform: translateY(-50%); }
+  [dir='rtl'] .choices__list--dropdown .choices__item--selectable {
+    text-align: left;
+    padding-right: 100px;
+    padding-left: 10px; }
+  [dir='rtl'] .choices__list--dropdown .choices__item--selectable:after {
+    left: auto;
+    right: 10px; } }
+
+.choices__list--dropdown .choices__item--selectable.is-highlighted {
+  background-color: #f2f2f2; }
+
+.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
+  opacity: 0.5; }
+
+.choices__item {
+  cursor: default; }
+
+.choices__item--selectable {
+  cursor: pointer; }
+
+.choices__item--disabled {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+       user-select: none;
+  opacity: 0.5; }
+
+.choices__heading {
+  font-weight: 600;
+  font-size: 12px;
+  padding: 10px;
+  border-bottom: 1px solid #f7f7f7;
+  color: gray; }
+
+.choices__button {
+  text-indent: -9999px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: 0;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer; }
+
+.choices__button:focus {
+  outline: none; }
+
+.choices__input {
+  display: inline-block;
+  vertical-align: baseline;
+  background-color: #f9f9f9;
+  font-size: 14px;
+  margin-bottom: 5px;
+  border: 0;
+  border-radius: 0;
+  max-width: 100%;
+  padding: 4px 2px 4px 0; }
+
+.choices__input:focus {
+  outline: 0; }
+
+[dir='rtl'] .choices__input {
+  padding-left: 2px;
+  padding-right: 0; }
+
+.choices__placeholder {
+  opacity: 0.5; }
+
+/*=====  End of Choices  ======*/
+.choices {
+  margin: 0;
+  font-size: inherit;
+  position: relative;
+  cursor: pointer; }
+  .choices:focus {
+    outline: none; }
+  .choices:after {
+    content: none !important; }
+  .choices.is-focused .form-select {
+    border-color: #90b5e2;
+    box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
+  .choices .dropdown-menu {
+    width: 100%;
+    height: auto; }
+    .choices .dropdown-menu .choices__list {
+      max-height: 13rem;
+      overflow-x: hidden; }
+    .choices .dropdown-menu .dropdown-item {
+      padding-right: 0.75rem;
+      padding-left: 0.75rem; }
+      .choices .dropdown-menu .dropdown-item.active {
+        background: transparent;
+        color: inherit; }
+      .choices .dropdown-menu .dropdown-item.is-highlighted {
+        color: #206bc4;
+        background-color: rgba(32, 107, 196, 0.06); }
+
+.choices__placeholder {
+  color: #a7abb1;
+  opacity: 1; }
+
+.choices__list--single {
+  padding: 0; }
+
+.choices__list--dropdown .choices__item--selectable:after {
+  content: none; }

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 +0,0 @@
-(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';
-
-  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;
-      };
-  }
-
-  return rangePlugin;
-
-}));