version 1.0.0-alpha.4

 Conflicts:

	pages/_docs/badges.md

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@babel/preset-env"
+  ]
+}

.browserslistrc

@@ -0,0 +1,11 @@
+>= 1%
+last 1 major version
+not dead
+Chrome >= 60
+Firefox >= 60
+Edge >= 15.15063
+Explorer 11
+iOS >= 10
+Safari >= 10
+Android >= 6
+not ExplorerMobile <= 11

.dependabot/config.yml

@@ -0,0 +1,11 @@
+# https://dependabot.com/docs/config-file/
+version: 1
+update_configs:
+  - package_manager: "javascript"
+    directory: "/"
+    update_schedule: "weekly"
+    default_reviewers:
+      - "codecalm"
+    default_labels:
+      - "dependencies"
+    version_requirement_updates: "increase_versions"

.editorconfig

@@ -1,22 +1,14 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs.
-# editorconfig.org
-
-root = true
-
 [*]
+charset=utf-8
+end_of_line=lf
+insert_final_newline=false
+indent_style=tab
+tab_width=3
+max_line_length=off
 
-# We recommend you to keep these unchanged.
-charset = utf-8
-end_of_line = lf
-indent_size = 4
-indent_style = tab
-insert_final_newline = true
-trim_trailing_whitespace = true
+[*.{rb,yml,scss}]
+indent_style=space
+indent_size=2
 
-[package.json]
-indent_style = space
-indent_size = 2
-
-[*.md]
-trim_trailing_whitespace = false
+[*.js.map]
+indent_size=3

.eslintrc

@@ -0,0 +1,10 @@
+{
+  "rules": {
+    "semi": ["error", "always"],
+    "quotes": ["error", "single"],
+    "no-var": ["error"]
+  },
+  "parserOptions": {
+    "ecmaVersion": 6
+  }
+}

.gitattributes

@@ -0,0 +1,15 @@
+# Enforce Unix newlines
+*.css   text eol=lf
+*.html  text eol=lf
+*.js    text eol=lf
+*.json  text eol=lf
+*.md    text eol=lf
+*.rb    text eol=lf
+*.scss  text eol=lf
+*.svg   text eol=lf
+*.txt   text eol=lf
+*.xml   text eol=lf
+*.yml   text eol=lf
+
+# Don't diff or textually merge source maps
+*.map   binary

.github/CODE_OF_CONDUCT.md

@@ -0,0 +1,10 @@
+# Tabler UI Community Conduct Guideline
+
+The following community guidelines are based on [The Ruby Community Conduct Guidelines](https://www.ruby-lang.org/en/conduct/).
+
+This document provides community guidelines for a respectful, productive, and collaborative place for any person who is willing to contribute to the Tabler project. It applies to all "collaborative space", which is defined as community communications channels (such as mailing lists, submitted patches, commit comments, etc.).
+
+- Participants will be tolerant of opposing views.
+- Participants must ensure that their language and actions are free of personal attacks and disparaging personal remarks.
+- When interpreting the words and actions of others, participants should always assume good intentions.
+- Behaviour which can be reasonably considered harassment will not be tolerated.

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+github: codecalm
+open_collective: tabler

.github/no-response.yml

@@ -0,0 +1,10 @@
+# Configuration for probot-no-response - https://github.com/probot/no-response
+
+daysUntilClose: 28
+
+closeComment: >
+  This issue has been automatically closed because there has been no response
+  to our request for more information from the original author. With only the
+  information that is currently in the issue, we don't have enough information
+  to take action. Please reach out if you have or find the answers we need so
+  that we can investigate further.

.gitignore

@@ -1,18 +1,23 @@
+node_modules/
+/package-lock.json
 .idea/
-_site/
-/Gemfile.lock
-/node_modules/
-/.sass-cache/
-/.jekyll-metadata
-/.asset-cache/
+/db.json
+.jekyll-metadata
+.jekyll-cache
+/tmp/
+/tmp-dist/
+/yarn.lock
 .DS_Store
-package-lock.json
-/_test/
-src/assets/css/dashboard.css
-src/assets/css/dashboard.min.css
-src/assets/plugins/**/plugin.css
-src/assets/plugins/**/plugin.min.css
-generated-site
-deploy-site
-/commits.sh
-/assets/css/
+/Gemfile.lock
+/_site/
+/.cache/
+
+.vscode/
+
+/_gh_pages/
+/site/docs/**/dist/
+/site/static/**/dist/
+/resources/
+/svg-tmp/
+/components/
+/percy.sh

.stylelintrc

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "stylelint-config-twbs-bootstrap/scss"
+  ],
+  "rules": {
+    "selector-no-qualifying-type": null
+  }
+}

CODE_OF_CONDUCT.md

@@ -1,46 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
-
-## Our Standards
-
-Examples of behavior that contributes to creating a positive environment include:
-
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
-
-Examples of unacceptable behavior by participants include:
-
-* The use of sexualized language or imagery and unwelcome sexual attention or advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
-
-## Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
-
-## Scope
-
-This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at codecalm@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
-
-[homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/

CONTRIBUTING.md

@@ -1,92 +0,0 @@
-# Contributing
-
-When contributing to this repository, please first discuss the change you wish to make via issue,
-email, or any other method with the owners of this repository before making a change. 
-
-Please note we have a code of conduct, please follow it in all your interactions with the project.
-
-## Pull Request Process
-
-1. Ensure any install or build dependencies are removed before the end of the layer when doing a 
-   build.
-2. Update the README.md with details of changes to the interface, this includes new environment 
-   variables, exposed ports, useful file locations and container parameters.
-3. Increase the version numbers in any examples files and the README.md to the new version that this
-   Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
-4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you 
-   do not have permission to do that, you may request the second reviewer to merge it for you.
-
-## Code of Conduct
-
-### Our Pledge
-
-In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to making participation in our project and
-our community a harassment-free experience for everyone, regardless of age, body
-size, disability, ethnicity, gender identity and expression, level of experience,
-nationality, personal appearance, race, religion, or sexual identity and
-orientation.
-
-### Our Standards
-
-Examples of behavior that contributes to creating a positive environment
-include:
-
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
-
-Examples of unacceptable behavior by participants include:
-
-* The use of sexualized language or imagery and unwelcome sexual attention or
-advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
-  address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
-  professional setting
-
-### Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable
-behavior and are expected to take appropriate and fair corrective action in
-response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or
-reject comments, commits, code, wiki edits, issues, and other contributions
-that are not aligned to this Code of Conduct, or to ban temporarily or
-permanently any contributor for other behaviors that they deem inappropriate,
-threatening, offensive, or harmful.
-
-### Scope
-
-This Code of Conduct applies both within project spaces and in public spaces
-when an individual is representing the project or its community. Examples of
-representing a project or community include using an official project e-mail
-address, posting via an official social media account, or acting as an appointed
-representative at an online or offline event. Representation of a project may be
-further defined and clarified by project maintainers.
-
-### Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team. All complaints will be reviewed and 
-investigated and will result in a response that is deemed necessary and appropriate 
-to the circumstances. The project team is obligated to maintain confidentiality 
-with regard to the reporter of an incident. Further details of specific 
-enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good
-faith may face temporary or permanent repercussions as determined by other
-members of the project's leadership.
-
-### Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available at [http://contributor-covenant.org/version/1/4][version]
-
-[homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/

Gemfile

@@ -1,7 +1,13 @@
-source 'https://rubygems.org' do
-  gem 'jekyll-tidy'
-  gem 'jekyll-redirect-from'
-  gem 'jekyll-toc'
-  gem 'jekyll-random'
-  gem 'public_suffix', '3.0.0'
+source "https://rubygems.org"
+
+gem "jekyll"
+
+group :jekyll_plugins do
+	gem 'jekyll-toc'
+	gem "jekyll-random"
+	gem "jekyll-tidy"
+	gem "jekyll-timeago"
+	gem 'jekyll-redirect-from'
 end
+
+gem 'wdm', '>= 0.1.1' if Gem.win_platform?

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018 Paweł Kuna
+Copyright (c) 2018-2019 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
@@ -9,13 +9,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

PULL_REQUEST_TEMPLATE.md

@@ -1,10 +0,0 @@
-## Description
-<!--- Describe your changes in detail -->
-
-## Screenshots (if appropriate):
-
-## Types of changes
-<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to change)

README.md

@@ -1,84 +1,91 @@
-<p align="center">
-  <a href="https://tabler.github.io/">
-    <img src="https://tabler.github.io/assets/images/logo-default.svg" alt="Tabler" width="72" height="72">
-  </a>
-</p>
+# Tabler
 
-<h3 align="center">Tabler - Admin panel made simple</h3>
+A premium and open source dashboard template with a responsive and high-quality UI.
 
-<p align="center">
-Premium and Open Source dashboard template with responsive and high quality UI. For Free!
-</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">
-	<strong>
-	  <a href="https://tabler.github.io/demo/">View Demo</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a>
-	</strong>
-</p>
-
-<p align="center">
-    <a href="https://www.npmjs.com/package/tabler-ui"><img src="https://img.shields.io/npm/dt/tabler-ui.svg" alt="Total Downloads"></a>
-    <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a>
-    <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler-ui.svg" alt="License"></a>
-    <a href="https://david-dm.org/tabler/tabler?type=dev"><img src="https://img.shields.io/david/dev/tabler/tabler.svg" alt="devDependency Status"></a>
-</p>
+![Tabler preview](/static/tabler-preview.png?raw=true)
 
 
+## Status
 
-![Tabler preview](https://tabler.github.io/assets/images/dashboard.png)
+<a href="https://www.npmjs.com/package/tabler"><a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"/></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"/></a> <img src="https://img.shields.io/npm/dt/tabler.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler.svg" alt="Latest Release"></a>
 
-----------
+[![Backers on Open Collective](https://opencollective.com/tabler/backers/badge.svg)](#backers)
+ [![Sponsors on Open Collective](https://opencollective.com/tabler/sponsors/badge.svg)](#sponsors)
 
-## About Tabler
 
-We’ve created this admin panel for everyone who wants to create any templates based on our ready components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS knowledge—as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
+## Features
 
-After using many of different admin panels, no matter free or paid, we've noticed they all had a lot of defects—and the main one was resource intensity.
-They were loading loads of useless components that you wouldn't ever use, so we've decided to choose a different way. The whole system is plugin-based, what means that you have a control over what is needed and what not.
+We've created this admin panel for everyone who wants to create templates based on our pre-made components. Our mission is to deliver a user-friendly, clear and easy administration panel that can be used by both simple websites and sophisticated systems. The only requirement is basic HTML and CSS (and some [Liquid](https://github.com/Shopify/liquid/wiki)) knowledge — as a reward, you'll be able to manage and visualise different types of data in the easiest possible way!
 
-To make the system works fast and reliable, we've converted most of the components to CSS. Thanks to this, you don't have to load a lot of unnecessary libraries into your browser what really boosts the overall speed.
+* **Responsive:** With the support for mobile, tablet and desktop displays, it doesn’t matter what device you’re using. Tabler is responsive in all major browsers.
+* **Cross Browser:** Our theme works perfectly with the latest Chrome, Firefox+, latest Safari, Opera, Edge and mobile browsers. We work hard to to provide continuous support for them.
+* **HTML5 & CSS3:** We use only modern web technologies, such as HTML5 and CSS3. Our theme includes some subtle CSS3 animations, which will help you attract attention.
+* **Clean Code:** We followed Bootstrap’s guidelines carefully to make your integration as easy as possible. All code is handwritten and W3C valid.
+* **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.
 
-## Documentation
 
-For full documentation, visit [tabler.github.io/tabler/docs](https://tabler.github.io/tabler/docs/index.html).
+## Sponsor Tabler
 
-## Getting Started
+<a href="https://github.com/sponsors/codecalm" target="_blank"><img src="/static/sponsor-banner-readme.png?raw=true" alt="Sponsor Tabler" /></a>
 
-### [Download ZIP](https://github.com/tabler/tabler/archive/dev.zip) or Git Clone
 
-```
-git clone https://github.com/tabler/tabler.git
-```
+### Sponsors
 
-### Setup environment
+Support this project by becoming a sponsor. Your logo will show up in this README with a link to your website. [Become a sponsor!](https://opencollective.com/tabler#sponsor)
 
-To use our build system and run our documentation locally, you'll need a copy of Tabler's source files and Node. Follow these steps:
+<a href="https://opencollective.com/tabler/tiers/sponsor/0/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/0/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/1/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/1/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/2/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/2/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/3/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/3/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/4/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/4/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/5/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/5/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/6/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/6/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/7/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/7/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/8/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/8/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/9/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/9/avatar.svg" /></a>
 
-1. [Download and install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
+
+## Setup environment
+
+To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow the steps below:
+
+1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
 2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
-3. [Install Ruby](https://www.ruby-lang.org/en/documentation/installation/), install [Bundler](https://bundler.io/) with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as Jekyll and plugins.
-   
-   **Windows users:** Read [this guide](https://jekyllrb.com/docs/windows/) to get Jekyll up and running without problems.
-  
-When completed, you'll be able to run the various commands provided from the command line.
+3. [Install Ruby](https://ruby-lang.org/en/documentation/installation/) - the recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
+4. [Install Bundler](https://bundler.io) with `gem install bundler` and finally run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
 
-### Build Tabler
+**Windows users**:
 
-1. From the root `/tabler` directory, run `npm run serve` in the command line.
-2. Open [http://localhost:4000](http://localhost:4000) in your browser, and voilà.
-3. Any change in `/src` directory will build application and refresh the page.
+1. [Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\\Program Files\git\bin\bash.exe"` to change the default shell.
+2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/) - the recommended version is [2.5.5](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe).
+3. [Read guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems.
+
+Once you complete the setup, you'll be able to run the various commands provided from the command line.
+
+
+## Build locally
+
+1. From the root `/tabler` directory, run `npm run start` in the command line.
+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.
+
+**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.
+
+
+## Feature requests
+
+https://tabler.canny.io/feature-requests
 
-**Warning!** all changes made in `_site/` folder would be overwritten on application build.
 
 ## Bugs and feature requests
 
-Have a bug or a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
+Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
 
-## Browser Support
-
-![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png)
---- | --- | --- | --- | --- | --- |
-Latest ✔ | Latest ✔ | Latest ✔ | 11+ ✔ | 9.1+ ✔ | Latest ✔ |
 
 ## Creators
 
@@ -88,6 +95,19 @@ Latest ✔ | Latest ✔ | Latest ✔ | 11+ ✔ | 9.1+ ✔ | Latest ✔ |
 - <https://github.com/codecalm>
 - <https://codecalm.net>
 
-## Copyright and license
 
-Code and documentation copyright 2018 the [Tabler Authors](https://github.com/tabler/tabler/graphs/contributors) and [codecalm.net](https://codecalm.net). Code released under the [MIT License](https://github.com/tabler/tabler/blob/master/LICENSE).
+### Contributors
+
+This project exists thanks to all the people who contribute.
+
+<img src="https://opencollective.com/tabler/contributors.svg?width=890&button=false" />
+
+### Backers
+
+Thank you to all our backers! 🙏 [Become a backer](https://opencollective.com/tabler#backer)
+
+<a href="https://opencollective.com/tabler#backers" target="_blank"><img src="https://opencollective.com/tabler/tiers/backer.svg?width=890&button=false" /></a>
+
+## License
+
+See the [LICENSE](https://github.com/tabler/tabler/blob/master/LICENSE) file.

_config.yml

@@ -1,226 +1,221 @@
-title: Tabler
-description: tabler.github.io - a responsive, flat and full featured admin template
+source: pages
+destination: tmp
 
-source: src
+version: 1.0.0-alpha.4
+title: Tabler
+description: Premium and Open Source dashboard template with responsive and high quality UI.
+github_url: https://github.com/tabler/tabler
+sponsor_url: https://github.com/sponsors/codecalm
+
+mapbox_key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
+
+debug: false
+
+dark-theme: false
 
 plugins:
-  - jekyll-tidy
-  - jekyll-toc
   - jekyll-random
+  - jekyll-toc
+  - jekyll-tidy
+  - jekyll-timeago
+  - jekyll-redirect-from
+
+tabler-plugins:
+  - tabler-flags
+  - tabler-payments
+  - tabler-buttons
 
 exclude:
-  - regenerate-images.sh
-  - .editorconfig
-  - buddy.yml
-  - package.json
-  - gulpfile.js
-  - start.sh
-  - Gemfile
-  - Gemfile.lock
-  - .git
-  - .idea
-  - .gitignore
-  - node_modules/
-  - .DS_Store
-  - .sass-cache/
-  - .asset-cache/
-  - assets/scss/*
-  - assets/plugins/**/*.scss
-  - push-to-repo.sh
-  - commits.sh
-
-collections:
-  docs:
-    output: true
-
-defaults:
-  - scope:
-      path: ""
-      type: docs
-    values:
-      layout: docs
+  - .jekyll-cache
 
+keep_files:
+  - css/ui-kit.css
+  - css/dark.css
+  - css/rtl.css
 
 markdown: kramdown
-highlighter: rouge
-
 kramdown:
+  input: GFM
   syntax_highlighter: rouge
-  syntax_highlighter_opts:
-    css_class: ''
-    span:
-      line_numbers: false
-
-toc:
-  min_level: 2
-  max_level: 3
 
 jekyll_tidy:
   compress_html: false
   ignore_env: development
 
-base_color: '#467fcf'
-github_url: https://github.com/tabler/tabler
+toc:
+  min_level: 2
+  max_level: 3
+  list_class: list-unstyled
 
-author:
-   name: codecalm.net
-   url: https://codecalm.net
+collections:
+  docs:
+    output: true
+  changelog:
+    output: false
+  components:
+    output: true
+
+defaults:
+  - scope:
+      type: "pages"
+      path: "*.md"
+    values:
+      layout: markdown
+
+  - scope:
+      type: "pages"
+    values:
+      layout: default
+  - scope:
+      type: "docs"
+    values:
+      layout: docs
+      toc: true
+  - scope:
+      type: "components"
+    values:
+      layout: component
 
-docs-menu:
-  - title: Getting started
-    pages: [index]
-  - title: Components
-    pages: [alerts, avatars, buttons, colors, cards, charts, form-components, tags, typography]
 
 colors:
-  blue: 
-    hex: '#467fcf'
-    name: Blue
-  azure: 
+  blue:
+    hex: '#206bc4'
+    title: Blue
+  azure:
     hex: '#45aaf2'
-    name: Azure
-  indigo: 
+    title: Azure
+  indigo:
     hex: '#6574cd'
-    name: Indigo
-  purple: 
+    title: Indigo
+  purple:
     hex: '#a55eea'
-    name: Purple
-  pink: 
+    title: Purple
+  pink:
     hex: '#f66d9b'
-    name: Pink
-  red: 
-    hex: '#e74c3c'
-    name: Red
-  orange: 
+    title: Pink
+  red:
+    hex: '#fa4654'
+    title: Red
+  orange:
     hex: '#fd9644'
-    name: Orange
-  yellow: 
+    title: Orange
+  yellow:
     hex: '#f1c40f'
-    name: Yellow
-  lime: 
+    title: Yellow
+  lime:
     hex: '#7bd235'
-    name: Lime
-  green: 
+    title: Lime
+  green:
     hex: '#5eba00'
-    name: Green
-  teal: 
+    title: Green
+  teal:
     hex: '#2bcbba'
-    name: Teal
-  cyan: 
+    title: Teal
+  cyan:
     hex: '#17a2b8'
-    name: Cyan
-  gray: 
+    title: Cyan
+  gray:
     hex: '#868e96'
-    name: Gray
-  gray-dark: 
-    hex: '#343a40'
-    name: Dark gray
+    title: Gray
 
-theme-colors:
-  primary: 
-    hex: '#467fcf'
-    name: Primary
-  secondary: 
-    hex: '#868e96'
-    name: Secondary
-  success: 
-    hex: '#38c172'
-    name: Success
-  info: 
-    hex: '#17a2b8'
-    name: Info
-  warning: 
-    hex: '#f8b700'
-    name: Warning
-  danger: 
-    hex: '#f90049'
-    name: Danger
-#  light:
-#    hex: '#f8f9fa'
-#    name: Light
-#  dark:
-#    hex: '#343a40'
-#    name: Dark
+colors-extra:
+  white:
+    hex: '#ffffff'
+    title: White
+  dark:
+    hex: '#303645'
+    title: Dark
 
-color_variants:
-  - name: 'Darkest'
-    suffix: -darkest
-  - name: 'Darker'
-    suffix: -darker
-  - name: 'Dark'
-    suffix: -dark
-  - name: 'Default'
-    suffix: ''
-  - name: 'Light'
-    suffix: -light
-  - name: 'Lighter'
-    suffix: -lighter
-  - name: 'Lightest'
-    suffix: -lightest
+variants:
+  - name: success
+    icon: check
+  - name: info
+    icon: info
+  - name: warning
+    icon: alert-triangle
+  - name: danger
+    icon: x-octagon
 
-social-buttons:
+button-variants:
+  primary:
+    class: primary
+    title: Primary
+  secondary:
+    class: secondary
+    title: Secondary
+  success:
+    class: success
+    title: Success
+  warning:
+    class: warning
+    title: Warning
+  danger:
+    class: danger
+    title: Danger
+  info:
+    class: info
+    title: Info
+  light:
+    class: light
+    title: Light
+  dark:
+    class: dark
+    title: Dark
+  link:
+    class: link
+    title: Link
+
+button-states:
+  - class:
+    title: Normal
+  - class: active
+    title: Active state
+  - class: disabled
+    title: Disabled
+
+socials:
   facebook:
-    icon: fa fa-facebook
-    name: Facebook
+    icon: brand/facebook
+    title: Facebook
   twitter:
-    icon: fa fa-twitter
-    name: Twitter
+    icon: brand/twitter
+    title: Twitter
   google:
-    icon: fa fa-google
-    name: Google
+    icon: brand/google
+    title: Google
   youtube:
-    icon: fa fa-youtube
-    name: Youtube
+    icon: brand/youtube
+    title: Youtube
   vimeo:
-    icon: fa fa-vimeo
-    name: Vimeo
+    icon: brand/vimeo
+    title: Vimeo
   dribbble:
-    icon: fa fa-dribbble
-    name: Dribble
+    icon: brand/dribbble
+    title: Dribbble
   github:
-    icon: fa fa-github
-    name: Github
+    icon: brand/github
+    title: Github
   instagram:
-    icon: fa fa-instagram
-    name: Instagram
+    icon: brand/instagram
+    title: Instagram
   pinterest:
-    icon: fa fa-pinterest
-    name: Pinterest
+    icon: brand/pinterest
+    title: Pinterest
   vk:
-    icon: fa fa-vk
-    name: VKontakte
+    icon: brand/vk
+    title: VK
   rss:
-    icon: fa fa-rss
-    name: RSS
+    icon: brand/rss
+    title: RSS
   flickr:
-    icon: fa fa-flickr
-    name: Flickr
+    icon: brand/flickr
+    title: Flickr
   bitbucket:
-    icon: fa fa-bitbucket
-    name: Bitbucket
+    icon: brand/bitbucket
+    title: Bitbucker
+  tabler:
+    icon: brand/tabler
+    title: Tabler
 
-google-maps-key: AIzaSyBEJy4UvF-JfcNciWlvlznyDlUckcspiD4
-google-maps-url: https://maps.googleapis.com/maps/api/js?key=AIzaSyCOJwXN0eoyeFZ3cYtGzPLFw8zGhQ750Xk
-
-theme-plugins:
-  charts-c3:
-    name: c3.js Charts
-    files: [css, js]
-  maps-google:
-    name: Google Maps
-    files: [css, js]
-  input-mask:
-    name: Input Mask
-    files: [js]
-#  iconfonts:
-#    name: Iconfonts
-#    files: [css]
-#  prismjs:
-#    name: Code Highlight
-#    files: [css, js]
-#  fullcalendar:
-#    name: FullCalendar
-#    files: [css, js]
-#  weather:
-#    name: Weather
-#    files: [css]
+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

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

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

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

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

build/copy-libs.js

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

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

build/rollup.config.js

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

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

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

demo/401.html

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

demo/403.html

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

demo/404.html

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

demo/500.html

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

demo/503.html

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

demo/blank.html

@@ -0,0 +1,738 @@
+<!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>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?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1582373134" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
+        <div class="container">
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
+            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <div class="navbar-collapse collapse">
+            <h6 class="navbar-heading">Navigation</h6>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="./index.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Home</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="./form-elements.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  </span>
+                  <span class="nav-link-title">Form elements</span>
+                </a>
+              </li>
+              <li class="nav-item active">
+                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			   aria-expanded="true" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Base</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                  <li >
+                    <a class="dropdown-item" href="./empty.html" >
+                      Empty page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item 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="./modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./maps.html" >
+                      Maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./maps-vector.html" >
+                      Vector maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./datatables.html" >
+                      Data Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./calendar.html" >
+                      Calendar
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./lists.html" >
+                      Lists
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./users.html" >
+                      Users
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./gallery.html" >
+                      Gallery
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./profile.html" >
+                      Profile
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./music.html" >
+                      Music
+                    </a>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Authentication
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                      <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                      <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                      <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                    </div>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Error pages
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="./400.html" class="dropdown-item">400 page</a>
+                      <a href="./401.html" class="dropdown-item">401 page</a>
+                      <a href="./403.html" class="dropdown-item">403 page</a>
+                      <a href="./404.html" class="dropdown-item">404 page</a>
+                      <a href="./500.html" class="dropdown-item">500 page</a>
+                      <a href="./503.html" class="dropdown-item">503 page</a>
+                      <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  </span>
+                  <span class="nav-link-title">Extra</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow">
+                  <li >
+                    <a class="dropdown-item" href="./invoice.html" >
+                      Invoice
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./blog.html" >
+                      Blog cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./snippets.html" >
+                      Snippets
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./search-results.html" >
+                      Search results
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./pricing.html" >
+                      Pricing cards
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Docs</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                  <li >
+                    <a class="dropdown-item" href="./docs/index.html" >
+                      Introduction
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/alerts.html" >
+                      Alerts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/autosize.html" >
+                      Autosize
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/avatars.html" >
+                      Avatars
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/badges.html" >
+                      Badges
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                      Breadcrumb
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/colors.html" >
+                      Colors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/countup.html" >
+                      Countup
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/cursors.html" >
+                      Cursors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/dropdowns.html" >
+                      Dropdowns
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/divider.html" >
+                      Divider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/empty.html" >
+                      Empty states
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/flags.html" >
+                      Flags
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/form-elements.html" >
+                      Form elements
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/form-helpers.html" >
+                      Form helpers
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/input-mask.html" >
+                      Form input mask
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/progress.html" >
+                      Progress
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/payments.html" >
+                      Payments
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/range-slider.html" >
+                      Range slider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/ribbons.html" >
+                      Ribbons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/spinners.html" >
+                      Spinners
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/steps.html" >
+                      Steps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/tables.html" >
+                      Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/tabs.html" >
+                      Tabs
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/timelines.html" >
+                      Timelines
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/toasts.html" >
+                      Toasts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/tooltips.html" >
+                      Tooltips
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/typography.html" >
+                      Typography
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item d-none-navbar-vertical">
+                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Customize</span>
+                </a>
+              </li>
+            </ul>
+            <h6 class="navbar-heading mt-4">Tools</h6>
+            <div class="navbar-side">
+              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                Customize
+              </a>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
+        <div class="container">
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
+            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <form class="form-inline w-50 mr-4 d-none d-md-flex">
+            <div class="input-icon w-100">
+              <span class="input-icon-addon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              </span>
+              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
+            </div>
+          </form>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <span class="flag flag-country-us mr-1"></span>
+                <span class="d-none d-lg-inline">English</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
+                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
+                  German</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
+                  Polish</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
+                  Japan</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
+                  Russian</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item dropdown pl-2">
+              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-lg-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">Founder</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="content">
+        <div class="container 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>
+            <p class="empty-title h3">No results found</p>
+            <p class="empty-subtitle text-muted">
+              Try adjusting your search or filter to find what you're looking for.
+            </p>
+            <div class="empty-action">
+              <a href="./." class="btn btn-primary">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                Add your first client
+              </a>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ml-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                Copyright © 2020
+                <a href="." class="link-secondary">Tabler</a>.
+                All rights reserved.
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Customize Tabler</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+            </button>
+          </div>
+          <div class="modal-body">
+            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
+            <div class="mb-3">
+              <label class="form-label">Color scheme</label>
+              <div class="form-hint">Light or dark presentation.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                  Light</button>
+                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                  Dark</button>
+              </div>
+            </div>
+            <div class="mb-4 text-muted">
+              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
+            </div>
+            <div class="mb-3">
+              <label class="form-label">Navigation position</label>
+              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
+              </div>
+            </div>
+            <div class="mb-3">
+              <label class="form-label">Sidebar size</label>
+              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
+              </div>
+            </div>
+            <div class="mb-3">
+              <label class="form-label">Sidebar position</label>
+              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
+              </div>
+            </div>
+            <div>
+              <label class="form-label">Navigation color</label>
+              <div class="form-hint">Light or dark version of the sidebar </div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1582373134"></script>
+    <script>
+      (function() {
+      	var navbarPrimary = document.getElementById('navbar-primary'),
+      		navbarSecondary = document.getElementById('navbar-secondary');
+      	var defaults = {
+      		theme: 'light',
+      		'navbar-position': 'horizontal',
+      		'navbar-size': 'wide',
+      		'navbar-side': 'left',
+      		'navbar-color': 'light',
+      	};
+      	var eventsClean = {
+      		'theme': function () {
+      			document.body.classList.remove('theme-dark');
+      		},
+      		'navbar-position': function () {
+      			navbarPrimary.classList.remove('navbar-vertical');
+      			navbarSecondary.classList.remove('d-none');
+      		},
+      		'navbar-size': function () {
+      			navbarPrimary.classList.remove('navbar-vertical-narrow');
+      		},
+      		'navbar-side': function () {
+      			navbarPrimary.classList.remove('navbar-right');
+      		},
+      		'navbar-color': function () {
+      			navbarPrimary.classList.remove('navbar-dark');
+      			navbarPrimary.classList.add('navbar-light');
+      		},
+      	};
+      	var events = {
+      		'theme:light': function () {
+      		},
+      		'theme:dark': function () {
+      			document.body.classList.add('theme-dark');
+      		},
+      		'navbar-position:vertical': function () {
+      			navbarPrimary.classList.add('navbar-vertical');
+      			navbarSecondary.classList.add('d-none');
+      		},
+      		'navbar-position:horizontal': function () {
+      		},
+      		'navbar-position:both': function () {
+      			navbarPrimary.classList.add('navbar-vertical');
+      		},
+      		'navbar-size:wide': function () {
+      		},
+      		'navbar-size:narrow': function () {
+      			navbarPrimary.classList.add('navbar-vertical-narrow');
+      		},
+      		'navbar-side:left': function () {
+      		},
+      		'navbar-side:right': function () {
+      			navbarPrimary.classList.add('navbar-right');
+      		},
+      		'navbar-color:light': function () {
+      		},
+      		'navbar-color:dark': function () {
+      			navbarPrimary.classList.add('navbar-dark');
+      			navbarPrimary.classList.remove('navbar-light');
+      		},
+      	};
+      	var updateThemeConfig = function (name) {
+      		var key, value;
+      		if (name) {
+      			[key, value] = name.split(':');
+      			setConfig(key, value);
+      		}
+      		applyConfig();
+      	};
+      	var disableTransitions = function () {
+      		document.body.classList.add('no-transitions');
+      		setTimeout(function () {
+      			document.body.classList.remove('no-transitions');
+      		}, 300);
+      	};
+      	var getConfig = function () {
+      		var config = {};
+      		for (var key in defaults) {
+      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
+      		}
+      		return config;
+      	};
+      	var setConfig = function (key, value) {
+      		localStorage.setItem('tabler-' + key, value);
+      	};
+      	var applyConfig = function () {
+      		disableTransitions();
+      		var config = getConfig();
+      		for (var key in config) {
+      			var value = config[key];
+      			eventsClean[key] && eventsClean[key].call();
+      			events[key + ':' + value] && events[key + ':' + value].call();
+      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
+      				activeTrigger.classList.remove('active')
+      			});
+      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
+      		}
+      	};
+      	applyConfig();
+      	for (var name in events) {
+      		var event = events[name];
+      		(function (event, name) {
+      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
+      				updateThemeConfig(name);
+      				event.call();
+      				e.preventDefault();
+      				return false;
+      			});
+      		})(event, name);
+      	}
+      })();
+    </script>
+    <script>
+      document.body.style.display = "block"
+    </script>
+  </body>
+</html>

demo/blog.html

@@ -0,0 +1,980 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.4
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Blog - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1582373134" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
+        <div class="container">
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
+            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <div class="navbar-collapse collapse">
+            <h6 class="navbar-heading">Navigation</h6>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="./index.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Home</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="./form-elements.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  </span>
+                  <span class="nav-link-title">Form elements</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Base</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                  <li >
+                    <a class="dropdown-item" href="./empty.html" >
+                      Empty page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./blank.html" >
+                      Blank page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./maps.html" >
+                      Maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./maps-vector.html" >
+                      Vector maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./datatables.html" >
+                      Data Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./calendar.html" >
+                      Calendar
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./lists.html" >
+                      Lists
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./users.html" >
+                      Users
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./gallery.html" >
+                      Gallery
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./profile.html" >
+                      Profile
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./music.html" >
+                      Music
+                    </a>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Authentication
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                      <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                      <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                      <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                    </div>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Error pages
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="./400.html" class="dropdown-item">400 page</a>
+                      <a href="./401.html" class="dropdown-item">401 page</a>
+                      <a href="./403.html" class="dropdown-item">403 page</a>
+                      <a href="./404.html" class="dropdown-item">404 page</a>
+                      <a href="./500.html" class="dropdown-item">500 page</a>
+                      <a href="./503.html" class="dropdown-item">503 page</a>
+                      <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item active">
+                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			   aria-expanded="true" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  </span>
+                  <span class="nav-link-title">Extra</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow">
+                  <li >
+                    <a class="dropdown-item" href="./invoice.html" >
+                      Invoice
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item active" href="./blog.html" >
+                      Blog cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./snippets.html" >
+                      Snippets
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./search-results.html" >
+                      Search results
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./pricing.html" >
+                      Pricing cards
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Docs</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                  <li >
+                    <a class="dropdown-item" href="./docs/index.html" >
+                      Introduction
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/alerts.html" >
+                      Alerts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/autosize.html" >
+                      Autosize
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/avatars.html" >
+                      Avatars
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/badges.html" >
+                      Badges
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                      Breadcrumb
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/colors.html" >
+                      Colors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/countup.html" >
+                      Countup
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/cursors.html" >
+                      Cursors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/dropdowns.html" >
+                      Dropdowns
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/divider.html" >
+                      Divider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/empty.html" >
+                      Empty states
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/flags.html" >
+                      Flags
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/form-elements.html" >
+                      Form elements
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/form-helpers.html" >
+                      Form helpers
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/input-mask.html" >
+                      Form input mask
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/progress.html" >
+                      Progress
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/payments.html" >
+                      Payments
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/range-slider.html" >
+                      Range slider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/ribbons.html" >
+                      Ribbons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/spinners.html" >
+                      Spinners
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/steps.html" >
+                      Steps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/tables.html" >
+                      Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/tabs.html" >
+                      Tabs
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/timelines.html" >
+                      Timelines
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/toasts.html" >
+                      Toasts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/tooltips.html" >
+                      Tooltips
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/typography.html" >
+                      Typography
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item d-none-navbar-vertical">
+                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Customize</span>
+                </a>
+              </li>
+            </ul>
+            <h6 class="navbar-heading mt-4">Tools</h6>
+            <div class="navbar-side">
+              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                Customize
+              </a>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
+        <div class="container">
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
+            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <form class="form-inline w-50 mr-4 d-none d-md-flex">
+            <div class="input-icon w-100">
+              <span class="input-icon-addon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              </span>
+              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
+            </div>
+          </form>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <span class="flag flag-country-us mr-1"></span>
+                <span class="d-none d-lg-inline">English</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
+                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
+                  German</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
+                  Polish</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
+                  Japan</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
+                  Russian</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item dropdown pl-2">
+              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-lg-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">Founder</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="content">
+        <div class="container">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Blog
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row row-deck">
+            <div class="col-sm-6 col-xl-4">
+              <div class="card d-flex flex-column">
+                <a href="#">
+                  <img class="card-img-top" src="./static/photos//9f36332564ca271d.jpg" alt="And this isn&#39;t my nose. This is a false one.">
+                </a>
+                <div class="card-body d-flex flex-column">
+                  <h3 class="card-title"><a href="#">And this isn't my nose. This is a false one.</a></h3>
+                  <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
+                  <div class="d-flex align-items-center pt-5 mt-auto">
+                    <span class="avatar avatar-md" style="background-image: url(./static/avatars/002m.jpg)"></span>
+                    <div class="ml-3">
+                      <a href="./profile.html" class="text-body">Dunn Slane</a>
+                      <small class="d-block text-muted">3 days ago</small>
+                    </div>
+                    <div class="ml-auto">
+                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-xl-4">
+              <div class="card d-flex flex-column">
+                <a href="#">
+                  <img class="card-img-top" src="./static/photos//35b88fc04a518c1b.jpg" alt="Well, I didn&#39;t vote for you.">
+                </a>
+                <div class="card-body d-flex flex-column">
+                  <h3 class="card-title"><a href="#">Well, I didn't vote for you.</a></h3>
+                  <div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
+                  <div class="d-flex align-items-center pt-5 mt-auto">
+                    <span class="avatar avatar-md" style="background-image: url(./static/avatars/003m.jpg)"></span>
+                    <div class="ml-3">
+                      <a href="./profile.html" class="text-body">Emmy Levet</a>
+                      <small class="d-block text-muted">3 days ago</small>
+                    </div>
+                    <div class="ml-auto">
+                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-xl-4">
+              <div class="card d-flex flex-column">
+                <a href="#">
+                  <img class="card-img-top" src="./static/photos//36e273986ed577b8.jpg" alt="How do you know she is a witch?">
+                </a>
+                <div class="card-body d-flex flex-column">
+                  <h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
+                  <div class="text-muted">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
+                  <div class="d-flex align-items-center pt-5 mt-auto">
+                    <span class="avatar avatar-md" style="background-image: url(./static/avatars/000f.jpg)"></span>
+                    <div class="ml-3">
+                      <a href="./profile.html" class="text-body">Maryjo Lebarree</a>
+                      <small class="d-block text-muted">3 days ago</small>
+                    </div>
+                    <div class="ml-auto">
+                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-xl-4">
+              <div class="card d-flex flex-column">
+                <div class="card-body d-flex flex-column">
+                  <h3 class="card-title"><a href="#">Weaseling out of things is important to learn.</a></h3>
+                  <div class="text-muted">Please do not offer my god a peanut. That's why I love elementary school, Edna. The children beli...</div>
+                  <div class="d-flex align-items-center pt-5 mt-auto">
+                    <span class="avatar avatar-md" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                    <div class="ml-3">
+                      <a href="./profile.html" class="text-body">Perren Keemar</a>
+                      <small class="d-block text-muted">3 days ago</small>
+                    </div>
+                    <div class="ml-auto">
+                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-xl-4">
+              <div class="card d-flex flex-column">
+                <div class="card-body d-flex flex-column">
+                  <h3 class="card-title"><a href="#">You don't like your job, you don't strike.</a></h3>
+                  <div class="text-muted">But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've ...</div>
+                  <div class="d-flex align-items-center pt-5 mt-auto">
+                    <span class="avatar avatar-md" style="background-image: url(./static/avatars/007m.jpg)"></span>
+                    <div class="ml-3">
+                      <a href="./profile.html" class="text-body">Sunny Airey</a>
+                      <small class="d-block text-muted">3 days ago</small>
+                    </div>
+                    <div class="ml-auto">
+                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-xl-4">
+              <div class="card d-flex flex-column">
+                <div class="card-body d-flex flex-column">
+                  <h3 class="card-title"><a href="#">I hope I didn't brain my damage.</a></h3>
+                  <div class="text-muted">I don't like being outdoors, Smithers. For one thing, there's too many fat children. Oh, loneline...</div>
+                  <div class="d-flex align-items-center pt-5 mt-auto">
+                    <span class="avatar avatar-md">SA</span>
+                    <div class="ml-3">
+                      <a href="./profile.html" class="text-body">Geoffry Flaunders</a>
+                      <small class="d-block text-muted">3 days ago</small>
+                    </div>
+                    <div class="ml-auto">
+                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6">
+              <div class="card d-flex flex-column">
+                <div class="row row-0 flex-fill">
+                  <div class="col-md-3">
+                    <a href="#">
+                      <img src="./static/photos//9f36332564ca271d.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                    </a>
+                  </div>
+                  <div class="col">
+                    <div class="card-body">
+                      <h3 class="card-title"><a href="#">And this isn't my nose. This is a false one.</a></h3>
+                      <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
+                      <div class="d-flex align-items-center pt-5 mt-auto">
+                        <span class="avatar avatar-md" style="background-image: url(./static/avatars/002m.jpg)"></span>
+                        <div class="ml-3">
+                          <a href="./profile.html" class="text-body">Dunn Slane</a>
+                          <small class="d-block text-muted">3 days ago</small>
+                        </div>
+                        <div class="ml-auto">
+                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6">
+              <div class="card d-flex flex-column">
+                <div class="row row-0 flex-fill">
+                  <div class="col-md-3">
+                    <a href="#">
+                      <img src="./static/photos//35b88fc04a518c1b.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                    </a>
+                  </div>
+                  <div class="col">
+                    <div class="card-body">
+                      <h3 class="card-title"><a href="#">Well, I didn't vote for you.</a></h3>
+                      <div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
+                      <div class="d-flex align-items-center pt-5 mt-auto">
+                        <span class="avatar avatar-md" style="background-image: url(./static/avatars/003m.jpg)"></span>
+                        <div class="ml-3">
+                          <a href="./profile.html" class="text-body">Emmy Levet</a>
+                          <small class="d-block text-muted">3 days ago</small>
+                        </div>
+                        <div class="ml-auto">
+                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6">
+              <div class="card d-flex flex-column">
+                <div class="row row-0 flex-fill">
+                  <div class="col-md-3">
+                    <a href="#">
+                      <img src="./static/photos//802a16cdf5ce3551.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                    </a>
+                  </div>
+                  <div class="col">
+                    <div class="card-body">
+                      <h3 class="card-title"><a href="#">Weaseling out of things is important to learn.</a></h3>
+                      <div class="text-muted">Please do not offer my god a peanut. That's why I love elementary school, Edna. The children believe anything you tell them. Brace yourselves gentlemen. According to the gas chromatograph, the secr...</div>
+                      <div class="d-flex align-items-center pt-5 mt-auto">
+                        <span class="avatar avatar-md" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                        <div class="ml-3">
+                          <a href="./profile.html" class="text-body">Perren Keemar</a>
+                          <small class="d-block text-muted">3 days ago</small>
+                        </div>
+                        <div class="ml-auto">
+                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6">
+              <div class="card d-flex flex-column">
+                <div class="row row-0 flex-fill">
+                  <div class="col-md-3">
+                    <a href="#">
+                      <img src="./static/photos//0986f97be719fb9a.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                    </a>
+                  </div>
+                  <div class="col">
+                    <div class="card-body">
+                      <h3 class="card-title"><a href="#">You don't like your job, you don't strike.</a></h3>
+                      <div class="text-muted">But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've wasted my life. Son, when you participate in sporting events, it's not whether you win or lose: it's...</div>
+                      <div class="d-flex align-items-center pt-5 mt-auto">
+                        <span class="avatar avatar-md" style="background-image: url(./static/avatars/007m.jpg)"></span>
+                        <div class="ml-3">
+                          <a href="./profile.html" class="text-body">Sunny Airey</a>
+                          <small class="d-block text-muted">3 days ago</small>
+                        </div>
+                        <div class="ml-auto">
+                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ml-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                Copyright © 2020
+                <a href="." class="link-secondary">Tabler</a>.
+                All rights reserved.
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Customize Tabler</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+            </button>
+          </div>
+          <div class="modal-body">
+            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
+            <div class="mb-3">
+              <label class="form-label">Color scheme</label>
+              <div class="form-hint">Light or dark presentation.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                  Light</button>
+                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                  Dark</button>
+              </div>
+            </div>
+            <div class="mb-4 text-muted">
+              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
+            </div>
+            <div class="mb-3">
+              <label class="form-label">Navigation position</label>
+              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
+              </div>
+            </div>
+            <div class="mb-3">
+              <label class="form-label">Sidebar size</label>
+              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
+              </div>
+            </div>
+            <div class="mb-3">
+              <label class="form-label">Sidebar position</label>
+              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
+              </div>
+            </div>
+            <div>
+              <label class="form-label">Navigation color</label>
+              <div class="form-hint">Light or dark version of the sidebar </div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1582373134"></script>
+    <script>
+      (function() {
+      	var navbarPrimary = document.getElementById('navbar-primary'),
+      		navbarSecondary = document.getElementById('navbar-secondary');
+      	var defaults = {
+      		theme: 'light',
+      		'navbar-position': 'horizontal',
+      		'navbar-size': 'wide',
+      		'navbar-side': 'left',
+      		'navbar-color': 'light',
+      	};
+      	var eventsClean = {
+      		'theme': function () {
+      			document.body.classList.remove('theme-dark');
+      		},
+      		'navbar-position': function () {
+      			navbarPrimary.classList.remove('navbar-vertical');
+      			navbarSecondary.classList.remove('d-none');
+      		},
+      		'navbar-size': function () {
+      			navbarPrimary.classList.remove('navbar-vertical-narrow');
+      		},
+      		'navbar-side': function () {
+      			navbarPrimary.classList.remove('navbar-right');
+      		},
+      		'navbar-color': function () {
+      			navbarPrimary.classList.remove('navbar-dark');
+      			navbarPrimary.classList.add('navbar-light');
+      		},
+      	};
+      	var events = {
+      		'theme:light': function () {
+      		},
+      		'theme:dark': function () {
+      			document.body.classList.add('theme-dark');
+      		},
+      		'navbar-position:vertical': function () {
+      			navbarPrimary.classList.add('navbar-vertical');
+      			navbarSecondary.classList.add('d-none');
+      		},
+      		'navbar-position:horizontal': function () {
+      		},
+      		'navbar-position:both': function () {
+      			navbarPrimary.classList.add('navbar-vertical');
+      		},
+      		'navbar-size:wide': function () {
+      		},
+      		'navbar-size:narrow': function () {
+      			navbarPrimary.classList.add('navbar-vertical-narrow');
+      		},
+      		'navbar-side:left': function () {
+      		},
+      		'navbar-side:right': function () {
+      			navbarPrimary.classList.add('navbar-right');
+      		},
+      		'navbar-color:light': function () {
+      		},
+      		'navbar-color:dark': function () {
+      			navbarPrimary.classList.add('navbar-dark');
+      			navbarPrimary.classList.remove('navbar-light');
+      		},
+      	};
+      	var updateThemeConfig = function (name) {
+      		var key, value;
+      		if (name) {
+      			[key, value] = name.split(':');
+      			setConfig(key, value);
+      		}
+      		applyConfig();
+      	};
+      	var disableTransitions = function () {
+      		document.body.classList.add('no-transitions');
+      		setTimeout(function () {
+      			document.body.classList.remove('no-transitions');
+      		}, 300);
+      	};
+      	var getConfig = function () {
+      		var config = {};
+      		for (var key in defaults) {
+      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
+      		}
+      		return config;
+      	};
+      	var setConfig = function (key, value) {
+      		localStorage.setItem('tabler-' + key, value);
+      	};
+      	var applyConfig = function () {
+      		disableTransitions();
+      		var config = getConfig();
+      		for (var key in config) {
+      			var value = config[key];
+      			eventsClean[key] && eventsClean[key].call();
+      			events[key + ':' + value] && events[key + ':' + value].call();
+      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
+      				activeTrigger.classList.remove('active')
+      			});
+      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
+      		}
+      	};
+      	applyConfig();
+      	for (var name in events) {
+      		var event = events[name];
+      		(function (event, name) {
+      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
+      				updateThemeConfig(name);
+      				event.call();
+      				e.preventDefault();
+      				return false;
+      			});
+      		})(event, name);
+      	}
+      })();
+    </script>
+    <script>
+      document.body.style.display = "block"
+    </script>
+  </body>
+</html>

demo/calendar.html

@@ -0,0 +1,932 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.4
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Calendar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1582373134" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
+        <div class="container">
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
+            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <div class="navbar-collapse collapse">
+            <h6 class="navbar-heading">Navigation</h6>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="./index.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Home</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="./form-elements.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  </span>
+                  <span class="nav-link-title">Form elements</span>
+                </a>
+              </li>
+              <li class="nav-item active">
+                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			   aria-expanded="true" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Base</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                  <li >
+                    <a class="dropdown-item" href="./empty.html" >
+                      Empty page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./blank.html" >
+                      Blank page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./maps.html" >
+                      Maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./maps-vector.html" >
+                      Vector maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./datatables.html" >
+                      Data Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item active" href="./calendar.html" >
+                      Calendar
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./lists.html" >
+                      Lists
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./users.html" >
+                      Users
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./gallery.html" >
+                      Gallery
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./profile.html" >
+                      Profile
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./music.html" >
+                      Music
+                    </a>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Authentication
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                      <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                      <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                      <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                    </div>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Error pages
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="./400.html" class="dropdown-item">400 page</a>
+                      <a href="./401.html" class="dropdown-item">401 page</a>
+                      <a href="./403.html" class="dropdown-item">403 page</a>
+                      <a href="./404.html" class="dropdown-item">404 page</a>
+                      <a href="./500.html" class="dropdown-item">500 page</a>
+                      <a href="./503.html" class="dropdown-item">503 page</a>
+                      <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  </span>
+                  <span class="nav-link-title">Extra</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow">
+                  <li >
+                    <a class="dropdown-item" href="./invoice.html" >
+                      Invoice
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./blog.html" >
+                      Blog cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./snippets.html" >
+                      Snippets
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./search-results.html" >
+                      Search results
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./pricing.html" >
+                      Pricing cards
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Docs</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                  <li >
+                    <a class="dropdown-item" href="./docs/index.html" >
+                      Introduction
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/alerts.html" >
+                      Alerts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/autosize.html" >
+                      Autosize
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/avatars.html" >
+                      Avatars
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/badges.html" >
+                      Badges
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                      Breadcrumb
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/colors.html" >
+                      Colors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/countup.html" >
+                      Countup
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/cursors.html" >
+                      Cursors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/dropdowns.html" >
+                      Dropdowns
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/divider.html" >
+                      Divider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/empty.html" >
+                      Empty states
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/flags.html" >
+                      Flags
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/form-elements.html" >
+                      Form elements
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/form-helpers.html" >
+                      Form helpers
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/input-mask.html" >
+                      Form input mask
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/progress.html" >
+                      Progress
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/payments.html" >
+                      Payments
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/range-slider.html" >
+                      Range slider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/ribbons.html" >
+                      Ribbons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/spinners.html" >
+                      Spinners
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/steps.html" >
+                      Steps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/tables.html" >
+                      Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/tabs.html" >
+                      Tabs
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/timelines.html" >
+                      Timelines
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/toasts.html" >
+                      Toasts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/tooltips.html" >
+                      Tooltips
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/typography.html" >
+                      Typography
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item d-none-navbar-vertical">
+                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Customize</span>
+                </a>
+              </li>
+            </ul>
+            <h6 class="navbar-heading mt-4">Tools</h6>
+            <div class="navbar-side">
+              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                Customize
+              </a>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
+        <div class="container">
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
+            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <form class="form-inline w-50 mr-4 d-none d-md-flex">
+            <div class="input-icon w-100">
+              <span class="input-icon-addon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              </span>
+              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
+            </div>
+          </form>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <span class="flag flag-country-us mr-1"></span>
+                <span class="d-none d-lg-inline">English</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
+                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
+                  German</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
+                  Polish</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
+                  Japan</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
+                  Russian</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item dropdown pl-2">
+              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-lg-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">Founder</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="content">
+        <div class="container">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Calendar
+                </h2>
+              </div>
+              <!-- Page title actions -->
+              <div class="col-auto ml-auto d-print-none">
+                <div class="d-flex">
+                  <a href="#" class="btn btn-primary">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                    Add event
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="card">
+            <div class="card-body">
+              <div id="calendar-main" class="card-calendar"></div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ml-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                Copyright © 2020
+                <a href="." class="link-secondary">Tabler</a>.
+                All rights reserved.
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true">
+      <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">New report</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div class="mb-3">
+              <label class="form-label">Name</label>
+              <input type="text" class="form-control" name="example-text-input" placeholder="Your report name">
+            </div>
+            <label class="form-label">Report type</label>
+            <div class="form-selectgroup-boxes row mb-3">
+              <div class="col-lg-6">
+                <label class="form-selectgroup-item">
+                  <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked>
+                  <div class="form-selectgroup-box d-flex align-items-center p-3">
+                    <div class="mr-3">
+                      <span class="form-selectgroup-check"></span>
+                    </div>
+                    <div class="form-selectgroup-box-content">
+                      <div class="form-selectgroup-title strong mb-1">Simple</div>
+                      <div class="text-muted">Provide only basic data needed for the report</div>
+                    </div>
+                  </div>
+                </label>
+              </div>
+              <div class="col-lg-6">
+                <label class="form-selectgroup-item">
+                  <input type="radio" name="report-type" value="1" class="form-selectgroup-input">
+                  <div class="form-selectgroup-box d-flex align-items-center p-3">
+                    <div class="mr-3">
+                      <span class="form-selectgroup-check"></span>
+                    </div>
+                    <div class="form-selectgroup-box-content">
+                      <div class="form-selectgroup-title strong mb-1">Advanced</div>
+                      <div class="text-muted">Insert charts and additional advanced analyses to be inserted in the report</div>
+                    </div>
+                  </div>
+                </label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-lg-8">
+                <div class="mb-3">
+                  <label class="form-label">Report url</label>
+                  <div class="input-group input-group-flat">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text">
+                        https://tabler.io/reports/
+                      </span>
+                    </div>
+                    <input type="text" class="form-control pl-0"  value="report-01">
+                  </div>
+                </div>
+              </div>
+              <div class="col-lg-4">
+                <div class="mb-3">
+                  <label class="form-label">Visibility</label>
+                  <select class="form-select">
+                    <option value="1" selected>Private</option>
+                    <option value="2">Public</option>
+                    <option value="3">Hidden</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal-body">
+            <div class="row">
+              <div class="col-lg-6">
+                <div class="mb-3">
+                  <label class="form-label">Client name</label>
+                  <input type="text" class="form-control">
+                </div>
+              </div>
+              <div class="col-lg-6">
+                <div class="mb-3">
+                  <label class="form-label">Reporting period</label>
+                  <input type="date" class="form-control">
+                </div>
+              </div>
+              <div class="col-lg-12">
+                <div>
+                  <label class="form-label">Additional information</label>
+                  <textarea class="form-control" rows="3"></textarea>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <a href="#" class="btn btn-link link-secondary" data-dismiss="modal">
+              Cancel
+            </a>
+            <a href="#" class="btn btn-primary ml-auto" data-dismiss="modal">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+              Create new report
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Customize Tabler</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+            </button>
+          </div>
+          <div class="modal-body">
+            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
+            <div class="mb-3">
+              <label class="form-label">Color scheme</label>
+              <div class="form-hint">Light or dark presentation.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                  Light</button>
+                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                  Dark</button>
+              </div>
+            </div>
+            <div class="mb-4 text-muted">
+              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
+            </div>
+            <div class="mb-3">
+              <label class="form-label">Navigation position</label>
+              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
+              </div>
+            </div>
+            <div class="mb-3">
+              <label class="form-label">Sidebar size</label>
+              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
+              </div>
+            </div>
+            <div class="mb-3">
+              <label class="form-label">Sidebar position</label>
+              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
+              </div>
+            </div>
+            <div>
+              <label class="form-label">Navigation color</label>
+              <div class="form-hint">Light or dark version of the sidebar </div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
+    <script src="./dist/libs/fullcalendar/core/main.min.js?1582373134"></script>
+    <script src="./dist/libs/fullcalendar/daygrid/main.min.js?1582373134"></script>
+    <script src="./dist/libs/fullcalendar/interaction/main.min.js?1582373134"></script>
+    <script src="./dist/libs/fullcalendar/timegrid/main.min.js?1582373134"></script>
+    <script src="./dist/libs/fullcalendar/list/main.min.js?1582373134"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1582373134"></script>
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+            var calendarEl = document.getElementById('calendar-main'),
+               today = new Date(),
+               y = today.getFullYear(),
+               m = today.getMonth(),
+               d = today.getDate();
+            window.FullCalendar && (new FullCalendar.Calendar(calendarEl, {
+      	   plugins: [ 'interaction', 'dayGrid' ],
+               themeSystem: 'standard',
+      	   header: {
+      		   left: 'title',
+      		   center: '',
+      		   right: 'prev,next'
+      	   },
+      	   selectable: true,
+      	   selectHelper: true,
+      	   nowIndicator: true,
+      	   views: {
+      		   dayGridMonth: { buttonText: 'month' },
+      		   timeGridWeek: { buttonText: 'week' },
+      		   timeGridDay: { buttonText: 'day' }
+      	   },
+      	   defaultView: 'dayGridMonth',
+      	   timeFormat: 'H(:mm)',
+      	   events: [
+      	   	{
+                     title: 'All Day Event',
+                     start: new Date(y, m, 1),
+      			   className: 'bg-blue-lt'
+                  },
+                  {
+                     id: 999,
+                     title: 'Repeating Event',
+                     start: new Date(y, m, 7, 6, 0),
+                     allDay: false,
+                     className: 'bg-blue-lt'
+                  },
+                  {
+                     id: 999,
+                     title: 'Repeating Event',
+                     start: new Date(y, m, 14, 6, 0),
+                     allDay: false,
+                     className: 'bg-lime-lt'
+                  },
+                  {
+                     title: 'Meeting',
+                     start: new Date(y, m, 4, 10, 30),
+                     allDay: false,
+                     className: 'bg-green-lt'
+                  },
+                  {
+                     title: 'Lunch',
+                     start: new Date(y, m, 5, 12, 0),
+                     end: new Date(y, m, 5, 14, 0),
+                     allDay: false,
+                     className: 'bg-red-lt'
+                  },
+                  {
+                     title: 'LBD Launch',
+                     start: new Date(y, m, 19, 12, 0),
+                     allDay: true,
+                     className: 'bg-azure-lt'
+                  },
+                  {
+                     title: 'Birthday Party',
+                     start: new Date(y, m, 16, 19, 0),
+                     end: new Date(y, m, 16, 22, 30),
+                     allDay: false,
+      		      className: 'bg-orange-lt'
+                  }
+               ]
+         })).render();
+      });
+    </script>
+    <script>
+      (function() {
+      	var navbarPrimary = document.getElementById('navbar-primary'),
+      		navbarSecondary = document.getElementById('navbar-secondary');
+      	var defaults = {
+      		theme: 'light',
+      		'navbar-position': 'horizontal',
+      		'navbar-size': 'wide',
+      		'navbar-side': 'left',
+      		'navbar-color': 'light',
+      	};
+      	var eventsClean = {
+      		'theme': function () {
+      			document.body.classList.remove('theme-dark');
+      		},
+      		'navbar-position': function () {
+      			navbarPrimary.classList.remove('navbar-vertical');
+      			navbarSecondary.classList.remove('d-none');
+      		},
+      		'navbar-size': function () {
+      			navbarPrimary.classList.remove('navbar-vertical-narrow');
+      		},
+      		'navbar-side': function () {
+      			navbarPrimary.classList.remove('navbar-right');
+      		},
+      		'navbar-color': function () {
+      			navbarPrimary.classList.remove('navbar-dark');
+      			navbarPrimary.classList.add('navbar-light');
+      		},
+      	};
+      	var events = {
+      		'theme:light': function () {
+      		},
+      		'theme:dark': function () {
+      			document.body.classList.add('theme-dark');
+      		},
+      		'navbar-position:vertical': function () {
+      			navbarPrimary.classList.add('navbar-vertical');
+      			navbarSecondary.classList.add('d-none');
+      		},
+      		'navbar-position:horizontal': function () {
+      		},
+      		'navbar-position:both': function () {
+      			navbarPrimary.classList.add('navbar-vertical');
+      		},
+      		'navbar-size:wide': function () {
+      		},
+      		'navbar-size:narrow': function () {
+      			navbarPrimary.classList.add('navbar-vertical-narrow');
+      		},
+      		'navbar-side:left': function () {
+      		},
+      		'navbar-side:right': function () {
+      			navbarPrimary.classList.add('navbar-right');
+      		},
+      		'navbar-color:light': function () {
+      		},
+      		'navbar-color:dark': function () {
+      			navbarPrimary.classList.add('navbar-dark');
+      			navbarPrimary.classList.remove('navbar-light');
+      		},
+      	};
+      	var updateThemeConfig = function (name) {
+      		var key, value;
+      		if (name) {
+      			[key, value] = name.split(':');
+      			setConfig(key, value);
+      		}
+      		applyConfig();
+      	};
+      	var disableTransitions = function () {
+      		document.body.classList.add('no-transitions');
+      		setTimeout(function () {
+      			document.body.classList.remove('no-transitions');
+      		}, 300);
+      	};
+      	var getConfig = function () {
+      		var config = {};
+      		for (var key in defaults) {
+      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
+      		}
+      		return config;
+      	};
+      	var setConfig = function (key, value) {
+      		localStorage.setItem('tabler-' + key, value);
+      	};
+      	var applyConfig = function () {
+      		disableTransitions();
+      		var config = getConfig();
+      		for (var key in config) {
+      			var value = config[key];
+      			eventsClean[key] && eventsClean[key].call();
+      			events[key + ':' + value] && events[key + ':' + value].call();
+      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
+      				activeTrigger.classList.remove('active')
+      			});
+      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
+      		}
+      	};
+      	applyConfig();
+      	for (var name in events) {
+      		var event = events[name];
+      		(function (event, name) {
+      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
+      				updateThemeConfig(name);
+      				event.call();
+      				e.preventDefault();
+      				return false;
+      			});
+      		})(event, name);
+      	}
+      })();
+    </script>
+    <script>
+      document.body.style.display = "block"
+    </script>
+  </body>
+</html>

demo/carousel.html

@@ -0,0 +1,895 @@
+<!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>Carousel - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1582373134" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
+        <div class="container">
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
+            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <div class="navbar-collapse collapse">
+            <h6 class="navbar-heading">Navigation</h6>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="./index.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Home</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="./form-elements.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  </span>
+                  <span class="nav-link-title">Form elements</span>
+                </a>
+              </li>
+              <li class="nav-item active">
+                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			   aria-expanded="true" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Base</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                  <li >
+                    <a class="dropdown-item" href="./empty.html" >
+                      Empty page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./blank.html" >
+                      Blank page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./maps.html" >
+                      Maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./maps-vector.html" >
+                      Vector maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./datatables.html" >
+                      Data Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./calendar.html" >
+                      Calendar
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item active" href="./carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./lists.html" >
+                      Lists
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./users.html" >
+                      Users
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./gallery.html" >
+                      Gallery
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./profile.html" >
+                      Profile
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./music.html" >
+                      Music
+                    </a>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Authentication
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                      <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                      <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                      <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                    </div>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Error pages
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="./400.html" class="dropdown-item">400 page</a>
+                      <a href="./401.html" class="dropdown-item">401 page</a>
+                      <a href="./403.html" class="dropdown-item">403 page</a>
+                      <a href="./404.html" class="dropdown-item">404 page</a>
+                      <a href="./500.html" class="dropdown-item">500 page</a>
+                      <a href="./503.html" class="dropdown-item">503 page</a>
+                      <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  </span>
+                  <span class="nav-link-title">Extra</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow">
+                  <li >
+                    <a class="dropdown-item" href="./invoice.html" >
+                      Invoice
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./blog.html" >
+                      Blog cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./snippets.html" >
+                      Snippets
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./search-results.html" >
+                      Search results
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./pricing.html" >
+                      Pricing cards
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Docs</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                  <li >
+                    <a class="dropdown-item" href="./docs/index.html" >
+                      Introduction
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/alerts.html" >
+                      Alerts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/autosize.html" >
+                      Autosize
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/avatars.html" >
+                      Avatars
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/badges.html" >
+                      Badges
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                      Breadcrumb
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/colors.html" >
+                      Colors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/countup.html" >
+                      Countup
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/cursors.html" >
+                      Cursors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/dropdowns.html" >
+                      Dropdowns
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/divider.html" >
+                      Divider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/empty.html" >
+                      Empty states
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/flags.html" >
+                      Flags
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/form-elements.html" >
+                      Form elements
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/form-helpers.html" >
+                      Form helpers
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/input-mask.html" >
+                      Form input mask
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/progress.html" >
+                      Progress
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/payments.html" >
+                      Payments
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/range-slider.html" >
+                      Range slider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/ribbons.html" >
+                      Ribbons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/spinners.html" >
+                      Spinners
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/steps.html" >
+                      Steps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/tables.html" >
+                      Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/tabs.html" >
+                      Tabs
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/timelines.html" >
+                      Timelines
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/toasts.html" >
+                      Toasts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/tooltips.html" >
+                      Tooltips
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/typography.html" >
+                      Typography
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item d-none-navbar-vertical">
+                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Customize</span>
+                </a>
+              </li>
+            </ul>
+            <h6 class="navbar-heading mt-4">Tools</h6>
+            <div class="navbar-side">
+              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                Customize
+              </a>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
+        <div class="container">
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
+            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <form class="form-inline w-50 mr-4 d-none d-md-flex">
+            <div class="input-icon w-100">
+              <span class="input-icon-addon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              </span>
+              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
+            </div>
+          </form>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <span class="flag flag-country-us mr-1"></span>
+                <span class="d-none d-lg-inline">English</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
+                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
+                  German</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
+                  Polish</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
+                  Japan</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
+                  Russian</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item dropdown pl-2">
+              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-lg-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">Founder</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="content">
+        <div class="container">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Carousel
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-6">
+              <div class="card">
+                <div class="card-header">
+                  <h3 class="card-title">Carousel</h3>
+                </div>
+                <div class="card-body">
+                  <div id="carousel-default" class="carousel slide" data-ride="carousel">
+                    <div class="carousel-inner">
+                      <div class="carousel-item active">
+                        <img class="d-block w-100" alt="" src="./static/photos/1b73704b282a8ec6.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/3d2998219313cd37.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/6ab3200b14549f8a.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/6d35d9a2bd6c63c2.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/8a26974ee6444acd.jpg" data-holder-rendered="true">
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6">
+              <div class="card">
+                <div class="card-header">
+                  <h3 class="card-title">Carousel with indicators</h3>
+                </div>
+                <div class="card-body">
+                  <div id="carousel-indicators" class="carousel slide" data-ride="carousel">
+                    <ol class="carousel-indicators">
+                      <li data-target="#carousel-indicators" data-slide-to="0" class="active"></li>
+                      <li data-target="#carousel-indicators" data-slide-to="1" class=""></li>
+                      <li data-target="#carousel-indicators" data-slide-to="2" class=""></li>
+                      <li data-target="#carousel-indicators" data-slide-to="3" class=""></li>
+                      <li data-target="#carousel-indicators" data-slide-to="4" class=""></li>
+                    </ol>
+                    <div class="carousel-inner">
+                      <div class="carousel-item active">
+                        <img class="d-block w-100" alt="" src="./static/photos/8c13ad59f739558c.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/8fdeb4785d2b82ef.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/9f36332564ca271d.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/35b88fc04a518c1b.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/36e273986ed577b8.jpg" data-holder-rendered="true">
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6">
+              <div class="card">
+                <div class="card-header">
+                  <h3 class="card-title">Carousel with controls</h3>
+                </div>
+                <div class="card-body">
+                  <div id="carousel-controls" class="carousel slide" data-ride="carousel">
+                    <div class="carousel-inner">
+                      <div class="carousel-item active">
+                        <img class="d-block w-100" alt="" src="./static/photos/75b555b99d5b38c4.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/546fd146c83f428c.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/802a16cdf5ce3551.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/0986f97be719fb9a.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/1194d63fe36a8670.jpg" data-holder-rendered="true">
+                      </div>
+                    </div>
+                    <a class="carousel-control-prev" href="#carousel-controls" role="button" data-slide="prev">
+                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                      <span class="sr-only">Previous</span>
+                    </a>
+                    <a class="carousel-control-next" href="#carousel-controls" role="button" data-slide="next">
+                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                      <span class="sr-only">Next</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6">
+              <div class="card">
+                <div class="card-header">
+                  <h3 class="card-title">Carousel with captions</h3>
+                </div>
+                <div class="card-body">
+                  <div id="carousel-captions" class="carousel slide" data-ride="carousel">
+                    <div class="carousel-inner">
+                      <div class="carousel-item active">
+                        <img class="d-block w-100" alt="" src="./static/photos/1366fdc9b9b277e4.jpg" data-holder-rendered="true">
+                        <div class="carousel-item-background d-none d-md-block"></div>
+                        <div class="carousel-caption d-none d-md-block">
+                          <h3>Slide label</h3>
+                          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+                        </div>
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/5358d787242861c4.jpg" data-holder-rendered="true">
+                        <div class="carousel-item-background d-none d-md-block"></div>
+                        <div class="carousel-caption d-none d-md-block">
+                          <h3>Slide label</h3>
+                          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+                        </div>
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/5614ec7eb9034d04.jpg" data-holder-rendered="true">
+                        <div class="carousel-item-background d-none d-md-block"></div>
+                        <div class="carousel-caption d-none d-md-block">
+                          <h3>Slide label</h3>
+                          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+                        </div>
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/56614e12b2a7bd68.jpg" data-holder-rendered="true">
+                        <div class="carousel-item-background d-none d-md-block"></div>
+                        <div class="carousel-caption d-none d-md-block">
+                          <h3>Slide label</h3>
+                          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+                        </div>
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./static/photos/77586f6ffa9fbc5e.jpg" data-holder-rendered="true">
+                        <div class="carousel-item-background d-none d-md-block"></div>
+                        <div class="carousel-caption d-none d-md-block">
+                          <h3>Slide label</h3>
+                          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+                        </div>
+                      </div>
+                    </div>
+                    <a class="carousel-control-prev" href="#carousel-captions" role="button" data-slide="prev">
+                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                      <span class="sr-only">Previous</span>
+                    </a>
+                    <a class="carousel-control-next" href="#carousel-captions" role="button" data-slide="next">
+                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                      <span class="sr-only">Next</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ml-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                Copyright © 2020
+                <a href="." class="link-secondary">Tabler</a>.
+                All rights reserved.
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Customize Tabler</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+            </button>
+          </div>
+          <div class="modal-body">
+            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
+            <div class="mb-3">
+              <label class="form-label">Color scheme</label>
+              <div class="form-hint">Light or dark presentation.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                  Light</button>
+                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                  Dark</button>
+              </div>
+            </div>
+            <div class="mb-4 text-muted">
+              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
+            </div>
+            <div class="mb-3">
+              <label class="form-label">Navigation position</label>
+              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
+              </div>
+            </div>
+            <div class="mb-3">
+              <label class="form-label">Sidebar size</label>
+              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
+              </div>
+            </div>
+            <div class="mb-3">
+              <label class="form-label">Sidebar position</label>
+              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
+              </div>
+            </div>
+            <div>
+              <label class="form-label">Navigation color</label>
+              <div class="form-hint">Light or dark version of the sidebar </div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1582373134"></script>
+    <script>
+      (function() {
+      	var navbarPrimary = document.getElementById('navbar-primary'),
+      		navbarSecondary = document.getElementById('navbar-secondary');
+      	var defaults = {
+      		theme: 'light',
+      		'navbar-position': 'horizontal',
+      		'navbar-size': 'wide',
+      		'navbar-side': 'left',
+      		'navbar-color': 'light',
+      	};
+      	var eventsClean = {
+      		'theme': function () {
+      			document.body.classList.remove('theme-dark');
+      		},
+      		'navbar-position': function () {
+      			navbarPrimary.classList.remove('navbar-vertical');
+      			navbarSecondary.classList.remove('d-none');
+      		},
+      		'navbar-size': function () {
+      			navbarPrimary.classList.remove('navbar-vertical-narrow');
+      		},
+      		'navbar-side': function () {
+      			navbarPrimary.classList.remove('navbar-right');
+      		},
+      		'navbar-color': function () {
+      			navbarPrimary.classList.remove('navbar-dark');
+      			navbarPrimary.classList.add('navbar-light');
+      		},
+      	};
+      	var events = {
+      		'theme:light': function () {
+      		},
+      		'theme:dark': function () {
+      			document.body.classList.add('theme-dark');
+      		},
+      		'navbar-position:vertical': function () {
+      			navbarPrimary.classList.add('navbar-vertical');
+      			navbarSecondary.classList.add('d-none');
+      		},
+      		'navbar-position:horizontal': function () {
+      		},
+      		'navbar-position:both': function () {
+      			navbarPrimary.classList.add('navbar-vertical');
+      		},
+      		'navbar-size:wide': function () {
+      		},
+      		'navbar-size:narrow': function () {
+      			navbarPrimary.classList.add('navbar-vertical-narrow');
+      		},
+      		'navbar-side:left': function () {
+      		},
+      		'navbar-side:right': function () {
+      			navbarPrimary.classList.add('navbar-right');
+      		},
+      		'navbar-color:light': function () {
+      		},
+      		'navbar-color:dark': function () {
+      			navbarPrimary.classList.add('navbar-dark');
+      			navbarPrimary.classList.remove('navbar-light');
+      		},
+      	};
+      	var updateThemeConfig = function (name) {
+      		var key, value;
+      		if (name) {
+      			[key, value] = name.split(':');
+      			setConfig(key, value);
+      		}
+      		applyConfig();
+      	};
+      	var disableTransitions = function () {
+      		document.body.classList.add('no-transitions');
+      		setTimeout(function () {
+      			document.body.classList.remove('no-transitions');
+      		}, 300);
+      	};
+      	var getConfig = function () {
+      		var config = {};
+      		for (var key in defaults) {
+      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
+      		}
+      		return config;
+      	};
+      	var setConfig = function (key, value) {
+      		localStorage.setItem('tabler-' + key, value);
+      	};
+      	var applyConfig = function () {
+      		disableTransitions();
+      		var config = getConfig();
+      		for (var key in config) {
+      			var value = config[key];
+      			eventsClean[key] && eventsClean[key].call();
+      			events[key + ':' + value] && events[key + ':' + value].call();
+      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
+      				activeTrigger.classList.remove('active')
+      			});
+      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
+      		}
+      	};
+      	applyConfig();
+      	for (var name in events) {
+      		var event = events[name];
+      		(function (event, name) {
+      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
+      				updateThemeConfig(name);
+      				event.call();
+      				e.preventDefault();
+      				return false;
+      			});
+      		})(event, name);
+      	}
+      })();
+    </script>
+    <script>
+      document.body.style.display = "block"
+    </script>
+  </body>
+</html>

demo/changelog.html

@@ -0,0 +1,746 @@
+<!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>Changelog - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1582373134" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
+        <div class="container">
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
+            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <div class="navbar-collapse collapse">
+            <h6 class="navbar-heading">Navigation</h6>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="./index.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Home</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="./form-elements.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  </span>
+                  <span class="nav-link-title">Form elements</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Base</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                  <li >
+                    <a class="dropdown-item" href="./empty.html" >
+                      Empty page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./blank.html" >
+                      Blank page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./maps.html" >
+                      Maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./maps-vector.html" >
+                      Vector maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./datatables.html" >
+                      Data Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./calendar.html" >
+                      Calendar
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./lists.html" >
+                      Lists
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./users.html" >
+                      Users
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./gallery.html" >
+                      Gallery
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./profile.html" >
+                      Profile
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./music.html" >
+                      Music
+                    </a>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Authentication
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                      <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                      <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                      <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                    </div>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Error pages
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="./400.html" class="dropdown-item">400 page</a>
+                      <a href="./401.html" class="dropdown-item">401 page</a>
+                      <a href="./403.html" class="dropdown-item">403 page</a>
+                      <a href="./404.html" class="dropdown-item">404 page</a>
+                      <a href="./500.html" class="dropdown-item">500 page</a>
+                      <a href="./503.html" class="dropdown-item">503 page</a>
+                      <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  </span>
+                  <span class="nav-link-title">Extra</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow">
+                  <li >
+                    <a class="dropdown-item" href="./invoice.html" >
+                      Invoice
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./blog.html" >
+                      Blog cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./snippets.html" >
+                      Snippets
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./search-results.html" >
+                      Search results
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./pricing.html" >
+                      Pricing cards
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Docs</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                  <li >
+                    <a class="dropdown-item" href="./docs/index.html" >
+                      Introduction
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/alerts.html" >
+                      Alerts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/autosize.html" >
+                      Autosize
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/avatars.html" >
+                      Avatars
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/badges.html" >
+                      Badges
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                      Breadcrumb
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/colors.html" >
+                      Colors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/countup.html" >
+                      Countup
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/cursors.html" >
+                      Cursors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/dropdowns.html" >
+                      Dropdowns
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/divider.html" >
+                      Divider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/empty.html" >
+                      Empty states
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/flags.html" >
+                      Flags
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/form-elements.html" >
+                      Form elements
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/form-helpers.html" >
+                      Form helpers
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/input-mask.html" >
+                      Form input mask
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/progress.html" >
+                      Progress
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/payments.html" >
+                      Payments
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/range-slider.html" >
+                      Range slider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/ribbons.html" >
+                      Ribbons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/spinners.html" >
+                      Spinners
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/steps.html" >
+                      Steps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/tables.html" >
+                      Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/tabs.html" >
+                      Tabs
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/timelines.html" >
+                      Timelines
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/toasts.html" >
+                      Toasts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/tooltips.html" >
+                      Tooltips
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/typography.html" >
+                      Typography
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item d-none-navbar-vertical">
+                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Customize</span>
+                </a>
+              </li>
+            </ul>
+            <h6 class="navbar-heading mt-4">Tools</h6>
+            <div class="navbar-side">
+              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                Customize
+              </a>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
+        <div class="container">
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
+            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <form class="form-inline w-50 mr-4 d-none d-md-flex">
+            <div class="input-icon w-100">
+              <span class="input-icon-addon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              </span>
+              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
+            </div>
+          </form>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <span class="flag flag-country-us mr-1"></span>
+                <span class="d-none d-lg-inline">English</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
+                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
+                  German</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
+                  Polish</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
+                  Japan</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
+                  Russian</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item dropdown pl-2">
+              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-lg-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">Founder</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="content">
+        <div class="container">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Changelog
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="card card-lg">
+            <div class="card-body markdown">
+              <div class="mb-4">
+                <div class="mb-2">
+                  <span class="badge bg-blue-lt">1.0.0</span> —
+                  <span class="text-muted">February 22, 2020</span>
+                </div>
+                <div>
+                  <p>Coming soon</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ml-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                Copyright © 2020
+                <a href="." class="link-secondary">Tabler</a>.
+                All rights reserved.
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Customize Tabler</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+            </button>
+          </div>
+          <div class="modal-body">
+            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
+            <div class="mb-3">
+              <label class="form-label">Color scheme</label>
+              <div class="form-hint">Light or dark presentation.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                  Light</button>
+                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                  Dark</button>
+              </div>
+            </div>
+            <div class="mb-4 text-muted">
+              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
+            </div>
+            <div class="mb-3">
+              <label class="form-label">Navigation position</label>
+              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
+              </div>
+            </div>
+            <div class="mb-3">
+              <label class="form-label">Sidebar size</label>
+              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
+              </div>
+            </div>
+            <div class="mb-3">
+              <label class="form-label">Sidebar position</label>
+              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
+              </div>
+            </div>
+            <div>
+              <label class="form-label">Navigation color</label>
+              <div class="form-hint">Light or dark version of the sidebar </div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1582373134"></script>
+    <script>
+      (function() {
+      	var navbarPrimary = document.getElementById('navbar-primary'),
+      		navbarSecondary = document.getElementById('navbar-secondary');
+      	var defaults = {
+      		theme: 'light',
+      		'navbar-position': 'horizontal',
+      		'navbar-size': 'wide',
+      		'navbar-side': 'left',
+      		'navbar-color': 'light',
+      	};
+      	var eventsClean = {
+      		'theme': function () {
+      			document.body.classList.remove('theme-dark');
+      		},
+      		'navbar-position': function () {
+      			navbarPrimary.classList.remove('navbar-vertical');
+      			navbarSecondary.classList.remove('d-none');
+      		},
+      		'navbar-size': function () {
+      			navbarPrimary.classList.remove('navbar-vertical-narrow');
+      		},
+      		'navbar-side': function () {
+      			navbarPrimary.classList.remove('navbar-right');
+      		},
+      		'navbar-color': function () {
+      			navbarPrimary.classList.remove('navbar-dark');
+      			navbarPrimary.classList.add('navbar-light');
+      		},
+      	};
+      	var events = {
+      		'theme:light': function () {
+      		},
+      		'theme:dark': function () {
+      			document.body.classList.add('theme-dark');
+      		},
+      		'navbar-position:vertical': function () {
+      			navbarPrimary.classList.add('navbar-vertical');
+      			navbarSecondary.classList.add('d-none');
+      		},
+      		'navbar-position:horizontal': function () {
+      		},
+      		'navbar-position:both': function () {
+      			navbarPrimary.classList.add('navbar-vertical');
+      		},
+      		'navbar-size:wide': function () {
+      		},
+      		'navbar-size:narrow': function () {
+      			navbarPrimary.classList.add('navbar-vertical-narrow');
+      		},
+      		'navbar-side:left': function () {
+      		},
+      		'navbar-side:right': function () {
+      			navbarPrimary.classList.add('navbar-right');
+      		},
+      		'navbar-color:light': function () {
+      		},
+      		'navbar-color:dark': function () {
+      			navbarPrimary.classList.add('navbar-dark');
+      			navbarPrimary.classList.remove('navbar-light');
+      		},
+      	};
+      	var updateThemeConfig = function (name) {
+      		var key, value;
+      		if (name) {
+      			[key, value] = name.split(':');
+      			setConfig(key, value);
+      		}
+      		applyConfig();
+      	};
+      	var disableTransitions = function () {
+      		document.body.classList.add('no-transitions');
+      		setTimeout(function () {
+      			document.body.classList.remove('no-transitions');
+      		}, 300);
+      	};
+      	var getConfig = function () {
+      		var config = {};
+      		for (var key in defaults) {
+      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
+      		}
+      		return config;
+      	};
+      	var setConfig = function (key, value) {
+      		localStorage.setItem('tabler-' + key, value);
+      	};
+      	var applyConfig = function () {
+      		disableTransitions();
+      		var config = getConfig();
+      		for (var key in config) {
+      			var value = config[key];
+      			eventsClean[key] && eventsClean[key].call();
+      			events[key + ':' + value] && events[key + ':' + value].call();
+      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
+      				activeTrigger.classList.remove('active')
+      			});
+      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
+      		}
+      	};
+      	applyConfig();
+      	for (var name in events) {
+      		var event = events[name];
+      		(function (event, name) {
+      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
+      				updateThemeConfig(name);
+      				event.call();
+      				e.preventDefault();
+      				return false;
+      			});
+      		})(event, name);
+      	}
+      })();
+    </script>
+    <script>
+      document.body.style.display = "block"
+    </script>
+  </body>
+</html>

demo/charts-heatmap.html

@@ -0,0 +1,966 @@
+<!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>Heatmap Charts - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1582373134" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
+        <div class="container">
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
+            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <div class="navbar-collapse collapse">
+            <h6 class="navbar-heading">Navigation</h6>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="./index.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Home</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="./form-elements.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  </span>
+                  <span class="nav-link-title">Form elements</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Base</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                  <li >
+                    <a class="dropdown-item" href="./empty.html" >
+                      Empty page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./blank.html" >
+                      Blank page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./maps.html" >
+                      Maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./maps-vector.html" >
+                      Vector maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./datatables.html" >
+                      Data Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./calendar.html" >
+                      Calendar
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./lists.html" >
+                      Lists
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./users.html" >
+                      Users
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./gallery.html" >
+                      Gallery
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./profile.html" >
+                      Profile
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./music.html" >
+                      Music
+                    </a>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Authentication
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                      <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                      <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                      <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                    </div>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Error pages
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="./400.html" class="dropdown-item">400 page</a>
+                      <a href="./401.html" class="dropdown-item">401 page</a>
+                      <a href="./403.html" class="dropdown-item">403 page</a>
+                      <a href="./404.html" class="dropdown-item">404 page</a>
+                      <a href="./500.html" class="dropdown-item">500 page</a>
+                      <a href="./503.html" class="dropdown-item">503 page</a>
+                      <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  </span>
+                  <span class="nav-link-title">Extra</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow">
+                  <li >
+                    <a class="dropdown-item" href="./invoice.html" >
+                      Invoice
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./blog.html" >
+                      Blog cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./snippets.html" >
+                      Snippets
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./search-results.html" >
+                      Search results
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./pricing.html" >
+                      Pricing cards
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Docs</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                  <li >
+                    <a class="dropdown-item" href="./docs/index.html" >
+                      Introduction
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/alerts.html" >
+                      Alerts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/autosize.html" >
+                      Autosize
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/avatars.html" >
+                      Avatars
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/badges.html" >
+                      Badges
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                      Breadcrumb
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/colors.html" >
+                      Colors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/countup.html" >
+                      Countup
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/cursors.html" >
+                      Cursors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/dropdowns.html" >
+                      Dropdowns
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/divider.html" >
+                      Divider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/empty.html" >
+                      Empty states
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/flags.html" >
+                      Flags
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/form-elements.html" >
+                      Form elements
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/form-helpers.html" >
+                      Form helpers
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/input-mask.html" >
+                      Form input mask
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/progress.html" >
+                      Progress
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/payments.html" >
+                      Payments
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/range-slider.html" >
+                      Range slider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/ribbons.html" >
+                      Ribbons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/spinners.html" >
+                      Spinners
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/steps.html" >
+                      Steps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/tables.html" >
+                      Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/tabs.html" >
+                      Tabs
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/timelines.html" >
+                      Timelines
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/toasts.html" >
+                      Toasts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/tooltips.html" >
+                      Tooltips
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="./docs/typography.html" >
+                      Typography
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item d-none-navbar-vertical">
+                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Customize</span>
+                </a>
+              </li>
+            </ul>
+            <h6 class="navbar-heading mt-4">Tools</h6>
+            <div class="navbar-side">
+              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                Customize
+              </a>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
+        <div class="container">
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
+            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <form class="form-inline w-50 mr-4 d-none d-md-flex">
+            <div class="input-icon w-100">
+              <span class="input-icon-addon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              </span>
+              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
+            </div>
+          </form>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <span class="flag flag-country-us mr-1"></span>
+                <span class="d-none d-lg-inline">English</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
+                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
+                  German</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
+                  Polish</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
+                  Japan</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
+                  Russian</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item dropdown pl-2">
+              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-lg-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">Founder</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="content">
+        <div class="container">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Heatmap Charts
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-xl-6">
+              <div class="card">
+                <div class="card-body">
+                  <h4 class="card-title">Basic Heatmap - Single Series</h4>
+                  <div id="heatmap-basic" class="chart"></div>
+                </div>
+              </div>
+              <script>
+                var generateData = function() {
+                	var data = [],
+                		min = 0,
+                		max = 100,
+                		count = 15;
+                	for (var n = 0; n < count; n++) {
+                		data.push({
+                			x: (n + 1).toString(),
+                			y: Math.floor(Math.random() * (max - min + 1)) + min
+                		});
+                	}
+                	return data;
+                };
+                var options = {
+                	chart: {
+                		height: 400,
+                		type: "heatmap"
+                	},
+                	dataLabels: {
+                		enabled: false
+                	},
+                	colors: [tabler.colors.blue, ],
+                	series: [
+                		{ name: "Jan", data: generateData() },
+                		{ name: "Feb", data: generateData() },
+                		{ name: "Mar", data: generateData() },
+                		{ name: "Apr", data: generateData() },
+                		{ name: "May", data: generateData() },
+                		{ name: "Jun", data: generateData() },
+                		{ name: "Jul", data: generateData() },
+                		{ name: "Aug", data: generateData() },
+                		{ name: "Sep", data: generateData() },
+                		{ name: "Oct", data: generateData() },
+                		{ name: "Nov", data: generateData() },
+                		{ name: "Dec", data: generateData() },
+                	],
+                	xaxis: {
+                		type: "category"
+                	}
+                };
+                (new ApexCharts(document.querySelector("#heatmap-basic"),options)).render();
+              </script>
+            </div>
+            <div class="col-xl-6">
+              <div class="card">
+                <div class="card-body">
+                  <h4 class="card-title">Heatmap - Multiple series</h4>
+                  <div id="heatmap-multiple" class="chart"></div>
+                </div>
+              </div>
+              <script>
+                var generateData = function() {
+                	var data = [],
+                		min = 0,
+                		max = 100,
+                		count = 15;
+                	for (var n = 0; n < count; n++) {
+                		data.push({
+                			x: (n + 1).toString(),
+                			y: Math.floor(Math.random() * (max - min + 1)) + min
+                		});
+                	}
+                	return data;
+                };
+                var options = {
+                	chart: {
+                		height: 400,
+                		type: "heatmap"
+                	},
+                	dataLabels: {
+                		enabled: false
+                	},
+                	colors: [tabler.colors.blue, tabler.colors.azure, tabler.colors.indigo, tabler.colors.purple, tabler.colors.pink, tabler.colors.red, tabler.colors.orange, tabler.colors.yellow, tabler.colors.lime, tabler.colors.green, tabler.colors.teal, tabler.colors.cyan, ],
+                	series: [
+                		{ name: "Jan", data: generateData() },
+                		{ name: "Feb", data: generateData() },
+                		{ name: "Mar", data: generateData() },
+                		{ name: "Apr", data: generateData() },
+                		{ name: "May", data: generateData() },
+                		{ name: "Jun", data: generateData() },
+                		{ name: "Jul", data: generateData() },
+                		{ name: "Aug", data: generateData() },
+                		{ name: "Sep", data: generateData() },
+                		{ name: "Oct", data: generateData() },
+                		{ name: "Nov", data: generateData() },
+                		{ name: "Dec", data: generateData() },
+                	],
+                	xaxis: {
+                		type: "category"
+                	}
+                };
+                (new ApexCharts(document.querySelector("#heatmap-multiple"),options)).render();
+              </script>
+            </div>
+            <div class="col-xl-6">
+              <div class="card">
+                <div class="card-body">
+                  <h4 class="card-title">Heatmap - Labels included</h4>
+                  <div id="heatmap-labels" class="chart"></div>
+                </div>
+              </div>
+              <script>
+                var generateData = function() {
+                	var data = [],
+                		min = 0,
+                		max = 100,
+                		count = 15;
+                	for (var n = 0; n < count; n++) {
+                		data.push({
+                			x: (n + 1).toString(),
+                			y: Math.floor(Math.random() * (max - min + 1)) + min
+                		});
+                	}
+                	return data;
+                };
+                var options = {
+                	chart: {
+                		height: 400,
+                		type: "heatmap"
+                	},
+                	dataLabels: {
+                		enabled: true
+                	},
+                	colors: [tabler.colors.blue, ],
+                	series: [
+                		{ name: "Jan", data: generateData() },
+                		{ name: "Feb", data: generateData() },
+                		{ name: "Mar", data: generateData() },
+                		{ name: "Apr", data: generateData() },
+                		{ name: "May", data: generateData() },
+                		{ name: "Jun", data: generateData() },
+                		{ name: "Jul", data: generateData() },
+                		{ name: "Aug", data: generateData() },
+                		{ name: "Sep", data: generateData() },
+                		{ name: "Oct", data: generateData() },
+                		{ name: "Nov", data: generateData() },
+                		{ name: "Dec", data: generateData() },
+                	],
+                	xaxis: {
+                		type: "category"
+                	}
+                };
+                (new ApexCharts(document.querySelector("#heatmap-labels"),options)).render();
+              </script>
+            </div>
+            <div class="col-xl-6">
+              <div class="card">
+                <div class="card-body">
+                  <h4 class="card-title">Heatmap - Color range</h4>
+                  <div id="heatmap-colors" class="chart"></div>
+                </div>
+              </div>
+              <script>
+                var generateData = function() {
+                	var data = [],
+                		min = 0,
+                		max = 100,
+                		count = 15;
+                	for (var n = 0; n < count; n++) {
+                		data.push({
+                			x: (n + 1).toString(),
+                			y: Math.floor(Math.random() * (max - min + 1)) + min
+                		});
+                	}
+                	return data;
+                };
+                var options = {
+                	chart: {
+                		height: 400,
+                		type: "heatmap"
+                	},
+                	dataLabels: {
+                		enabled: false
+                	},
+                	plotOptions: {
+                		heatmap: {
+                			enableShades: true,
+                			colorScale: {
+                				ranges: [{
+                					from: 0,
+                					to: 20,
+                					name: "Low",
+                					color: tabler.colors.green
+                				}, {
+                					from: 21,
+                					to: 50,
+                					name: "Medium",
+                					color: tabler.colors.blue
+                				}, {
+                					from: 51,
+                					to: 75,
+                					name: "High",
+                					color: tabler.colors.yellow
+                				}, {
+                					from: 76,
+                					to: 100,
+                					name: "Extreme",
+                					color: tabler.colors.red
+                				}]
+                			}
+                		}
+                	},
+                	series: [
+                		{ name: "Jan", data: generateData() },
+                		{ name: "Feb", data: generateData() },
+                		{ name: "Mar", data: generateData() },
+                		{ name: "Apr", data: generateData() },
+                		{ name: "May", data: generateData() },
+                		{ name: "Jun", data: generateData() },
+                		{ name: "Jul", data: generateData() },
+                		{ name: "Aug", data: generateData() },
+                		{ name: "Sep", data: generateData() },
+                		{ name: "Oct", data: generateData() },
+                		{ name: "Nov", data: generateData() },
+                		{ name: "Dec", data: generateData() },
+                	],
+                	xaxis: {
+                		type: "category"
+                	}
+                };
+                (new ApexCharts(document.querySelector("#heatmap-colors"),options)).render();
+              </script>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ml-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                Copyright © 2020
+                <a href="." class="link-secondary">Tabler</a>.
+                All rights reserved.
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Customize Tabler</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+            </button>
+          </div>
+          <div class="modal-body">
+            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
+            <div class="mb-3">
+              <label class="form-label">Color scheme</label>
+              <div class="form-hint">Light or dark presentation.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                  Light</button>
+                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                  Dark</button>
+              </div>
+            </div>
+            <div class="mb-4 text-muted">
+              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
+            </div>
+            <div class="mb-3">
+              <label class="form-label">Navigation position</label>
+              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
+              </div>
+            </div>
+            <div class="mb-3">
+              <label class="form-label">Sidebar size</label>
+              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
+              </div>
+            </div>
+            <div class="mb-3">
+              <label class="form-label">Sidebar position</label>
+              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
+              </div>
+            </div>
+            <div>
+              <label class="form-label">Navigation color</label>
+              <div class="form-hint">Light or dark version of the sidebar </div>
+              <div class="btn-group w-100">
+                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
+                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1582373134"></script>
+    <script>
+      (function() {
+      	var navbarPrimary = document.getElementById('navbar-primary'),
+      		navbarSecondary = document.getElementById('navbar-secondary');
+      	var defaults = {
+      		theme: 'light',
+      		'navbar-position': 'horizontal',
+      		'navbar-size': 'wide',
+      		'navbar-side': 'left',
+      		'navbar-color': 'light',
+      	};
+      	var eventsClean = {
+      		'theme': function () {
+      			document.body.classList.remove('theme-dark');
+      		},
+      		'navbar-position': function () {
+      			navbarPrimary.classList.remove('navbar-vertical');
+      			navbarSecondary.classList.remove('d-none');
+      		},
+      		'navbar-size': function () {
+      			navbarPrimary.classList.remove('navbar-vertical-narrow');
+      		},
+      		'navbar-side': function () {
+      			navbarPrimary.classList.remove('navbar-right');
+      		},
+      		'navbar-color': function () {
+      			navbarPrimary.classList.remove('navbar-dark');
+      			navbarPrimary.classList.add('navbar-light');
+      		},
+      	};
+      	var events = {
+      		'theme:light': function () {
+      		},
+      		'theme:dark': function () {
+      			document.body.classList.add('theme-dark');
+      		},
+      		'navbar-position:vertical': function () {
+      			navbarPrimary.classList.add('navbar-vertical');
+      			navbarSecondary.classList.add('d-none');
+      		},
+      		'navbar-position:horizontal': function () {
+      		},
+      		'navbar-position:both': function () {
+      			navbarPrimary.classList.add('navbar-vertical');
+      		},
+      		'navbar-size:wide': function () {
+      		},
+      		'navbar-size:narrow': function () {
+      			navbarPrimary.classList.add('navbar-vertical-narrow');
+      		},
+      		'navbar-side:left': function () {
+      		},
+      		'navbar-side:right': function () {
+      			navbarPrimary.classList.add('navbar-right');
+      		},
+      		'navbar-color:light': function () {
+      		},
+      		'navbar-color:dark': function () {
+      			navbarPrimary.classList.add('navbar-dark');
+      			navbarPrimary.classList.remove('navbar-light');
+      		},
+      	};
+      	var updateThemeConfig = function (name) {
+      		var key, value;
+      		if (name) {
+      			[key, value] = name.split(':');
+      			setConfig(key, value);
+      		}
+      		applyConfig();
+      	};
+      	var disableTransitions = function () {
+      		document.body.classList.add('no-transitions');
+      		setTimeout(function () {
+      			document.body.classList.remove('no-transitions');
+      		}, 300);
+      	};
+      	var getConfig = function () {
+      		var config = {};
+      		for (var key in defaults) {
+      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
+      		}
+      		return config;
+      	};
+      	var setConfig = function (key, value) {
+      		localStorage.setItem('tabler-' + key, value);
+      	};
+      	var applyConfig = function () {
+      		disableTransitions();
+      		var config = getConfig();
+      		for (var key in config) {
+      			var value = config[key];
+      			eventsClean[key] && eventsClean[key].call();
+      			events[key + ':' + value] && events[key + ':' + value].call();
+      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
+      				activeTrigger.classList.remove('active')
+      			});
+      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
+      		}
+      	};
+      	applyConfig();
+      	for (var name in events) {
+      		var event = events[name];
+      		(function (event, name) {
+      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
+      				updateThemeConfig(name);
+      				event.call();
+      				e.preventDefault();
+      				return false;
+      			});
+      		})(event, name);
+      	}
+      })();
+    </script>
+    <script>
+      document.body.style.display = "block"
+    </script>
+  </body>
+</html>

demo/components.html

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

@@ -0,0 +1,837 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.4
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Card with footer buttons - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <div class="navbar-collapse collapse">
+            <h6 class="navbar-heading">Navigation</h6>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="../index.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Home</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="../form-elements.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  </span>
+                  <span class="nav-link-title">Form elements</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Base</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                  <li >
+                    <a class="dropdown-item" href="../empty.html" >
+                      Empty page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blank.html" >
+                      Blank page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps.html" >
+                      Maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps-vector.html" >
+                      Vector maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../datatables.html" >
+                      Data Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../calendar.html" >
+                      Calendar
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../lists.html" >
+                      Lists
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../users.html" >
+                      Users
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../gallery.html" >
+                      Gallery
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../profile.html" >
+                      Profile
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../music.html" >
+                      Music
+                    </a>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Authentication
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../sign-in.html" class="dropdown-item">Sign in</a>
+                      <a href="../sign-up.html" class="dropdown-item">Sign up</a>
+                      <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
+                      <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
+                    </div>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Error pages
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../400.html" class="dropdown-item">400 page</a>
+                      <a href="../401.html" class="dropdown-item">401 page</a>
+                      <a href="../403.html" class="dropdown-item">403 page</a>
+                      <a href="../404.html" class="dropdown-item">404 page</a>
+                      <a href="../500.html" class="dropdown-item">500 page</a>
+                      <a href="../503.html" class="dropdown-item">503 page</a>
+                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  </span>
+                  <span class="nav-link-title">Extra</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow">
+                  <li >
+                    <a class="dropdown-item" href="../invoice.html" >
+                      Invoice
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blog.html" >
+                      Blog cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../snippets.html" >
+                      Snippets
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../search-results.html" >
+                      Search results
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../pricing.html" >
+                      Pricing cards
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Docs</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                  <li >
+                    <a class="dropdown-item" href="../docs/index.html" >
+                      Introduction
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/alerts.html" >
+                      Alerts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/autosize.html" >
+                      Autosize
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/avatars.html" >
+                      Avatars
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/badges.html" >
+                      Badges
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                      Breadcrumb
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/colors.html" >
+                      Colors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/countup.html" >
+                      Countup
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cursors.html" >
+                      Cursors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/dropdowns.html" >
+                      Dropdowns
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/divider.html" >
+                      Divider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/empty.html" >
+                      Empty states
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/flags.html" >
+                      Flags
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-elements.html" >
+                      Form elements
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-helpers.html" >
+                      Form helpers
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/input-mask.html" >
+                      Form input mask
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/progress.html" >
+                      Progress
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/payments.html" >
+                      Payments
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/range-slider.html" >
+                      Range slider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/ribbons.html" >
+                      Ribbons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/spinners.html" >
+                      Spinners
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/steps.html" >
+                      Steps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tables.html" >
+                      Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tabs.html" >
+                      Tabs
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/timelines.html" >
+                      Timelines
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/toasts.html" >
+                      Toasts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tooltips.html" >
+                      Tooltips
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/typography.html" >
+                      Typography
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item d-none-navbar-vertical">
+                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Customize</span>
+                </a>
+              </li>
+            </ul>
+            <h6 class="navbar-heading mt-4">Tools</h6>
+            <div class="navbar-side">
+              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                Customize
+              </a>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <form class="form-inline w-50 mr-4 d-none d-md-flex">
+            <div class="input-icon w-100">
+              <span class="input-icon-addon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              </span>
+              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
+            </div>
+          </form>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <span class="flag flag-country-us mr-1"></span>
+                <span class="d-none d-lg-inline">English</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
+                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
+                  German</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
+                  Polish</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
+                  Japan</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
+                  Russian</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item dropdown pl-2">
+              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <div class="d-none d-lg-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">Founder</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="content">
+        <div class="container">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action active">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Card with footer buttons</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div class="flex-fill" style="max-width: 572px">
+                        <div class="card">
+                          <div class="card-body">
+                            <h3 class="card-title">Card with footer buttons</h3>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                              neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                          </div>
+                          <!-- Card footer -->
+                          <div class="card-footer">
+                            <div class="d-flex">
+                              <a href="#" class="btn btn-link">Cancel</a>
+                              <a href="#" class="btn btn-primary ml-auto">Go somewhere</a>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <div class="card">
+                      <div class="card-body">
+                        <h3 class="card-title">Card with footer buttons</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                          neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                      </div>
+                      <!-- Card footer -->
+                      <div class="card-footer">
+                        <div class="d-flex">
+                          <a href="#" class="btn btn-link">Cancel</a>
+                          <a href="#" class="btn btn-primary ml-auto">Go somewhere</a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a></div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Card with footer buttons","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
+                        <div class=\"card\">\n      
+                          <div class=\"card-body\">\n         
+                            <h3 class=\"card-title\">Card with footer buttons</h3>
+                            \n         
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima\n            neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                            \n      </div>
+                          \n      <!-- Card footer -->\n      
+                          <div class=\"card-footer\">\n         
+                            <div class=\"d-flex\">\n            <a href=\"#\" class=\"btn btn-link\">Cancel</a>\n            <a href=\"#\" class=\"btn btn-primary ml-auto\">Go somewhere</a>\n         </div>
+                            \n      </div>
+                          \n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-transparent">
+        <div class="container">
+          <div class="row text-center align-items-center flex-row-reverse">
+            <div class="col-lg-auto ml-lg-auto">
+              <ul class="list-inline list-inline-dots mb-0">
+                <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
+                <li class="list-inline-item"><a href="../faq.html" class="link-secondary">FAQ</a></li>
+                <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+              </ul>
+            </div>
+            <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+              Copyright © 2020
+              <a href=".." class="link-secondary">Tabler</a>.
+              All rights reserved.
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Customize Tabler</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
+          <div class="mb-3">
+            <label class="form-label">Color scheme</label>
+            <div class="form-hint">Light or dark presentation.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                Dark</button>
+            </div>
+          </div>
+          <div class="mb-4 text-muted">
+            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Navigation position</label>
+            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar size</label>
+            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar position</label>
+            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
+            </div>
+          </div>
+          <div>
+            <label class="form-label">Navigation color</label>
+            <div class="form-hint">Light or dark version of the sidebar </div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Libs JS -->
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1582373134"></script>
+  <script>
+    (function() {
+    	var navbarPrimary = document.getElementById('navbar-primary'),
+    		navbarSecondary = document.getElementById('navbar-secondary');
+    	var defaults = {
+    		theme: 'light',
+    		'navbar-position': 'horizontal',
+    		'navbar-size': 'wide',
+    		'navbar-side': 'left',
+    		'navbar-color': 'light',
+    	};
+    	var eventsClean = {
+    		'theme': function () {
+    			document.body.classList.remove('theme-dark');
+    		},
+    		'navbar-position': function () {
+    			navbarPrimary.classList.remove('navbar-vertical');
+    			navbarSecondary.classList.remove('d-none');
+    		},
+    		'navbar-size': function () {
+    			navbarPrimary.classList.remove('navbar-vertical-narrow');
+    		},
+    		'navbar-side': function () {
+    			navbarPrimary.classList.remove('navbar-right');
+    		},
+    		'navbar-color': function () {
+    			navbarPrimary.classList.remove('navbar-dark');
+    			navbarPrimary.classList.add('navbar-light');
+    		},
+    	};
+    	var events = {
+    		'theme:light': function () {
+    		},
+    		'theme:dark': function () {
+    			document.body.classList.add('theme-dark');
+    		},
+    		'navbar-position:vertical': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    			navbarSecondary.classList.add('d-none');
+    		},
+    		'navbar-position:horizontal': function () {
+    		},
+    		'navbar-position:both': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    		},
+    		'navbar-size:wide': function () {
+    		},
+    		'navbar-size:narrow': function () {
+    			navbarPrimary.classList.add('navbar-vertical-narrow');
+    		},
+    		'navbar-side:left': function () {
+    		},
+    		'navbar-side:right': function () {
+    			navbarPrimary.classList.add('navbar-right');
+    		},
+    		'navbar-color:light': function () {
+    		},
+    		'navbar-color:dark': function () {
+    			navbarPrimary.classList.add('navbar-dark');
+    			navbarPrimary.classList.remove('navbar-light');
+    		},
+    	};
+    	var updateThemeConfig = function (name) {
+    		var key, value;
+    		if (name) {
+    			[key, value] = name.split(':');
+    			setConfig(key, value);
+    		}
+    		applyConfig();
+    	};
+    	var disableTransitions = function () {
+    		document.body.classList.add('no-transitions');
+    		setTimeout(function () {
+    			document.body.classList.remove('no-transitions');
+    		}, 300);
+    	};
+    	var getConfig = function () {
+    		var config = {};
+    		for (var key in defaults) {
+    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
+    		}
+    		return config;
+    	};
+    	var setConfig = function (key, value) {
+    		localStorage.setItem('tabler-' + key, value);
+    	};
+    	var applyConfig = function () {
+    		disableTransitions();
+    		var config = getConfig();
+    		for (var key in config) {
+    			var value = config[key];
+    			eventsClean[key] && eventsClean[key].call();
+    			events[key + ':' + value] && events[key + ':' + value].call();
+    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
+    				activeTrigger.classList.remove('active')
+    			});
+    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
+    		}
+    	};
+    	applyConfig();
+    	for (var name in events) {
+    		var event = events[name];
+    		(function (event, name) {
+    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
+    				updateThemeConfig(name);
+    				event.call();
+    				e.preventDefault();
+    				return false;
+    			});
+    		})(event, name);
+    	}
+    })();
+  </script>
+  <script>
+    document.body.style.display = "block"
+  </script>
+</body>
+</html>

demo/components/card-ribbon.html

@@ -0,0 +1,823 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.4
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Card with ribbon - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-ribbon.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-ribbon.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-ribbon.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <div class="navbar-collapse collapse">
+            <h6 class="navbar-heading">Navigation</h6>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="../index.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Home</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="../form-elements.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  </span>
+                  <span class="nav-link-title">Form elements</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Base</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                  <li >
+                    <a class="dropdown-item" href="../empty.html" >
+                      Empty page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blank.html" >
+                      Blank page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps.html" >
+                      Maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps-vector.html" >
+                      Vector maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../datatables.html" >
+                      Data Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../calendar.html" >
+                      Calendar
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../lists.html" >
+                      Lists
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../users.html" >
+                      Users
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../gallery.html" >
+                      Gallery
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../profile.html" >
+                      Profile
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../music.html" >
+                      Music
+                    </a>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Authentication
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../sign-in.html" class="dropdown-item">Sign in</a>
+                      <a href="../sign-up.html" class="dropdown-item">Sign up</a>
+                      <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
+                      <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
+                    </div>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Error pages
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../400.html" class="dropdown-item">400 page</a>
+                      <a href="../401.html" class="dropdown-item">401 page</a>
+                      <a href="../403.html" class="dropdown-item">403 page</a>
+                      <a href="../404.html" class="dropdown-item">404 page</a>
+                      <a href="../500.html" class="dropdown-item">500 page</a>
+                      <a href="../503.html" class="dropdown-item">503 page</a>
+                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  </span>
+                  <span class="nav-link-title">Extra</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow">
+                  <li >
+                    <a class="dropdown-item" href="../invoice.html" >
+                      Invoice
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blog.html" >
+                      Blog cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../snippets.html" >
+                      Snippets
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../search-results.html" >
+                      Search results
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../pricing.html" >
+                      Pricing cards
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Docs</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                  <li >
+                    <a class="dropdown-item" href="../docs/index.html" >
+                      Introduction
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/alerts.html" >
+                      Alerts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/autosize.html" >
+                      Autosize
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/avatars.html" >
+                      Avatars
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/badges.html" >
+                      Badges
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                      Breadcrumb
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/colors.html" >
+                      Colors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/countup.html" >
+                      Countup
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cursors.html" >
+                      Cursors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/dropdowns.html" >
+                      Dropdowns
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/divider.html" >
+                      Divider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/empty.html" >
+                      Empty states
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/flags.html" >
+                      Flags
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-elements.html" >
+                      Form elements
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-helpers.html" >
+                      Form helpers
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/input-mask.html" >
+                      Form input mask
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/progress.html" >
+                      Progress
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/payments.html" >
+                      Payments
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/range-slider.html" >
+                      Range slider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/ribbons.html" >
+                      Ribbons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/spinners.html" >
+                      Spinners
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/steps.html" >
+                      Steps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tables.html" >
+                      Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tabs.html" >
+                      Tabs
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/timelines.html" >
+                      Timelines
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/toasts.html" >
+                      Toasts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tooltips.html" >
+                      Tooltips
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/typography.html" >
+                      Typography
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item d-none-navbar-vertical">
+                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Customize</span>
+                </a>
+              </li>
+            </ul>
+            <h6 class="navbar-heading mt-4">Tools</h6>
+            <div class="navbar-side">
+              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                Customize
+              </a>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <form class="form-inline w-50 mr-4 d-none d-md-flex">
+            <div class="input-icon w-100">
+              <span class="input-icon-addon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              </span>
+              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
+            </div>
+          </form>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <span class="flag flag-country-us mr-1"></span>
+                <span class="d-none d-lg-inline">English</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
+                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
+                  German</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
+                  Polish</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
+                  Japan</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
+                  Russian</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item dropdown pl-2">
+              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <div class="d-none d-lg-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">Founder</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="content">
+        <div class="container">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action active">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Card with ribbon</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div class="flex-fill" style="max-width: 274px">
+                        <div class="card">
+                          <div class="card-body">
+                            <h3 class="card-title">Card with ribbon</h3>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.</p>
+                          </div>
+                          <div class="ribbon ribbon-bookmark bg-orange"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <div class="card">
+                      <div class="card-body">
+                        <h3 class="card-title">Card with ribbon</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.</p>
+                      </div>
+                      <div class="ribbon ribbon-bookmark bg-orange"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a></div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Card with ribbon","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n\n\n
+                        <div class=\"card\">\n\t
+                          <div class=\"card-body\">\n\t\t\n\t\t\t
+                            <h3 class=\"card-title\">Card with ribbon</h3>
+                            \n\t\t\t
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.</p>
+                            \n\t\t\n\t</div>
+                          \n\n\t
+                          <div class=\"ribbon ribbon-bookmark bg-orange\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-filled\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"></polygon></svg>\n</div>
+                          \n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-transparent">
+        <div class="container">
+          <div class="row text-center align-items-center flex-row-reverse">
+            <div class="col-lg-auto ml-lg-auto">
+              <ul class="list-inline list-inline-dots mb-0">
+                <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
+                <li class="list-inline-item"><a href="../faq.html" class="link-secondary">FAQ</a></li>
+                <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+              </ul>
+            </div>
+            <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+              Copyright © 2020
+              <a href=".." class="link-secondary">Tabler</a>.
+              All rights reserved.
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Customize Tabler</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
+          <div class="mb-3">
+            <label class="form-label">Color scheme</label>
+            <div class="form-hint">Light or dark presentation.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                Dark</button>
+            </div>
+          </div>
+          <div class="mb-4 text-muted">
+            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Navigation position</label>
+            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar size</label>
+            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar position</label>
+            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
+            </div>
+          </div>
+          <div>
+            <label class="form-label">Navigation color</label>
+            <div class="form-hint">Light or dark version of the sidebar </div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Libs JS -->
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1582373134"></script>
+  <script>
+    (function() {
+    	var navbarPrimary = document.getElementById('navbar-primary'),
+    		navbarSecondary = document.getElementById('navbar-secondary');
+    	var defaults = {
+    		theme: 'light',
+    		'navbar-position': 'horizontal',
+    		'navbar-size': 'wide',
+    		'navbar-side': 'left',
+    		'navbar-color': 'light',
+    	};
+    	var eventsClean = {
+    		'theme': function () {
+    			document.body.classList.remove('theme-dark');
+    		},
+    		'navbar-position': function () {
+    			navbarPrimary.classList.remove('navbar-vertical');
+    			navbarSecondary.classList.remove('d-none');
+    		},
+    		'navbar-size': function () {
+    			navbarPrimary.classList.remove('navbar-vertical-narrow');
+    		},
+    		'navbar-side': function () {
+    			navbarPrimary.classList.remove('navbar-right');
+    		},
+    		'navbar-color': function () {
+    			navbarPrimary.classList.remove('navbar-dark');
+    			navbarPrimary.classList.add('navbar-light');
+    		},
+    	};
+    	var events = {
+    		'theme:light': function () {
+    		},
+    		'theme:dark': function () {
+    			document.body.classList.add('theme-dark');
+    		},
+    		'navbar-position:vertical': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    			navbarSecondary.classList.add('d-none');
+    		},
+    		'navbar-position:horizontal': function () {
+    		},
+    		'navbar-position:both': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    		},
+    		'navbar-size:wide': function () {
+    		},
+    		'navbar-size:narrow': function () {
+    			navbarPrimary.classList.add('navbar-vertical-narrow');
+    		},
+    		'navbar-side:left': function () {
+    		},
+    		'navbar-side:right': function () {
+    			navbarPrimary.classList.add('navbar-right');
+    		},
+    		'navbar-color:light': function () {
+    		},
+    		'navbar-color:dark': function () {
+    			navbarPrimary.classList.add('navbar-dark');
+    			navbarPrimary.classList.remove('navbar-light');
+    		},
+    	};
+    	var updateThemeConfig = function (name) {
+    		var key, value;
+    		if (name) {
+    			[key, value] = name.split(':');
+    			setConfig(key, value);
+    		}
+    		applyConfig();
+    	};
+    	var disableTransitions = function () {
+    		document.body.classList.add('no-transitions');
+    		setTimeout(function () {
+    			document.body.classList.remove('no-transitions');
+    		}, 300);
+    	};
+    	var getConfig = function () {
+    		var config = {};
+    		for (var key in defaults) {
+    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
+    		}
+    		return config;
+    	};
+    	var setConfig = function (key, value) {
+    		localStorage.setItem('tabler-' + key, value);
+    	};
+    	var applyConfig = function () {
+    		disableTransitions();
+    		var config = getConfig();
+    		for (var key in config) {
+    			var value = config[key];
+    			eventsClean[key] && eventsClean[key].call();
+    			events[key + ':' + value] && events[key + ':' + value].call();
+    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
+    				activeTrigger.classList.remove('active')
+    			});
+    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
+    		}
+    	};
+    	applyConfig();
+    	for (var name in events) {
+    		var event = events[name];
+    		(function (event, name) {
+    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
+    				updateThemeConfig(name);
+    				event.call();
+    				e.preventDefault();
+    				return false;
+    			});
+    		})(event, name);
+    	}
+    })();
+  </script>
+  <script>
+    document.body.style.display = "block"
+  </script>
+</body>
+</html>

demo/components/card-tabs-bottom.html

@@ -0,0 +1,939 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.4
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Card with bottom tabs - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-tabs-bottom.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-tabs-bottom.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-tabs-bottom.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <div class="navbar-collapse collapse">
+            <h6 class="navbar-heading">Navigation</h6>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="../index.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Home</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="../form-elements.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  </span>
+                  <span class="nav-link-title">Form elements</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Base</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                  <li >
+                    <a class="dropdown-item" href="../empty.html" >
+                      Empty page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blank.html" >
+                      Blank page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps.html" >
+                      Maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps-vector.html" >
+                      Vector maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../datatables.html" >
+                      Data Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../calendar.html" >
+                      Calendar
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../lists.html" >
+                      Lists
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../users.html" >
+                      Users
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../gallery.html" >
+                      Gallery
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../profile.html" >
+                      Profile
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../music.html" >
+                      Music
+                    </a>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Authentication
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../sign-in.html" class="dropdown-item">Sign in</a>
+                      <a href="../sign-up.html" class="dropdown-item">Sign up</a>
+                      <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
+                      <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
+                    </div>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Error pages
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../400.html" class="dropdown-item">400 page</a>
+                      <a href="../401.html" class="dropdown-item">401 page</a>
+                      <a href="../403.html" class="dropdown-item">403 page</a>
+                      <a href="../404.html" class="dropdown-item">404 page</a>
+                      <a href="../500.html" class="dropdown-item">500 page</a>
+                      <a href="../503.html" class="dropdown-item">503 page</a>
+                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  </span>
+                  <span class="nav-link-title">Extra</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow">
+                  <li >
+                    <a class="dropdown-item" href="../invoice.html" >
+                      Invoice
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blog.html" >
+                      Blog cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../snippets.html" >
+                      Snippets
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../search-results.html" >
+                      Search results
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../pricing.html" >
+                      Pricing cards
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Docs</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                  <li >
+                    <a class="dropdown-item" href="../docs/index.html" >
+                      Introduction
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/alerts.html" >
+                      Alerts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/autosize.html" >
+                      Autosize
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/avatars.html" >
+                      Avatars
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/badges.html" >
+                      Badges
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                      Breadcrumb
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/colors.html" >
+                      Colors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/countup.html" >
+                      Countup
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cursors.html" >
+                      Cursors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/dropdowns.html" >
+                      Dropdowns
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/divider.html" >
+                      Divider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/empty.html" >
+                      Empty states
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/flags.html" >
+                      Flags
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-elements.html" >
+                      Form elements
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-helpers.html" >
+                      Form helpers
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/input-mask.html" >
+                      Form input mask
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/progress.html" >
+                      Progress
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/payments.html" >
+                      Payments
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/range-slider.html" >
+                      Range slider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/ribbons.html" >
+                      Ribbons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/spinners.html" >
+                      Spinners
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/steps.html" >
+                      Steps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tables.html" >
+                      Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tabs.html" >
+                      Tabs
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/timelines.html" >
+                      Timelines
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/toasts.html" >
+                      Toasts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tooltips.html" >
+                      Tooltips
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/typography.html" >
+                      Typography
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item d-none-navbar-vertical">
+                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Customize</span>
+                </a>
+              </li>
+            </ul>
+            <h6 class="navbar-heading mt-4">Tools</h6>
+            <div class="navbar-side">
+              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                Customize
+              </a>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <form class="form-inline w-50 mr-4 d-none d-md-flex">
+            <div class="input-icon w-100">
+              <span class="input-icon-addon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              </span>
+              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
+            </div>
+          </form>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <span class="flag flag-country-us mr-1"></span>
+                <span class="d-none d-lg-inline">English</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
+                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
+                  German</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
+                  Polish</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
+                  Japan</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
+                  Russian</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item dropdown pl-2">
+              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <div class="d-none d-lg-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">Founder</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="content">
+        <div class="container">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action active">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Card with bottom tabs</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div class="flex-fill" style="max-width: 572px">
+                        <!-- Cards with tabs component -->
+                        <div class="card-tabs">
+                          <div class="tab-content">
+                            <!-- Content of card #1 -->
+                            <div id="tab-bottom-1" class="card tab-pane active show">
+                              <div class="card-body">
+                                <div class="card-title">Content of tab #1</div>
+                                <p>
+                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                                </p>
+                              </div>
+                            </div>
+                            <!-- Content of card #2 -->
+                            <div id="tab-bottom-2" class="card tab-pane">
+                              <div class="card-body">
+                                <div class="card-title">Content of tab #2</div>
+                                <p>
+                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                                </p>
+                              </div>
+                            </div>
+                            <!-- Content of card #3 -->
+                            <div id="tab-bottom-3" class="card tab-pane">
+                              <div class="card-body">
+                                <div class="card-title">Content of tab #3</div>
+                                <p>
+                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                                </p>
+                              </div>
+                            </div>
+                            <!-- Content of card #4 -->
+                            <div id="tab-bottom-4" class="card tab-pane">
+                              <div class="card-body">
+                                <div class="card-title">Content of tab #4</div>
+                                <p>
+                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                                </p>
+                              </div>
+                            </div>
+                          </div>
+                          <!-- Cards navigation -->
+                          <ul class="nav nav-tabs nav-tabs-bottom">
+                            <li class="nav-item"><a href="#tab-bottom-1" class="nav-link active" data-toggle="tab">Tab 1</a></li>
+                            <li class="nav-item"><a href="#tab-bottom-2" class="nav-link" data-toggle="tab">Tab 2</a></li>
+                            <li class="nav-item"><a href="#tab-bottom-3" class="nav-link" data-toggle="tab">Tab 3</a></li>
+                            <li class="nav-item"><a href="#tab-bottom-4" class="nav-link" data-toggle="tab">Tab 4</a></li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <!-- Cards with tabs component -->
+                    <div class="card-tabs">
+                      <div class="tab-content">
+                        <!-- Content of card #1 -->
+                        <div id="tab-bottom-1" class="card tab-pane active show">
+                          <div class="card-body">
+                            <div class="card-title">Content of tab #1</div>
+                            <p>
+                              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                            </p>
+                          </div>
+                        </div>
+                        <!-- Content of card #2 -->
+                        <div id="tab-bottom-2" class="card tab-pane">
+                          <div class="card-body">
+                            <div class="card-title">Content of tab #2</div>
+                            <p>
+                              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                            </p>
+                          </div>
+                        </div>
+                        <!-- Content of card #3 -->
+                        <div id="tab-bottom-3" class="card tab-pane">
+                          <div class="card-body">
+                            <div class="card-title">Content of tab #3</div>
+                            <p>
+                              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                            </p>
+                          </div>
+                        </div>
+                        <!-- Content of card #4 -->
+                        <div id="tab-bottom-4" class="card tab-pane">
+                          <div class="card-body">
+                            <div class="card-title">Content of tab #4</div>
+                            <p>
+                              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                      <!-- Cards navigation -->
+                      <ul class="nav nav-tabs nav-tabs-bottom">
+                        <li class="nav-item"><a href="#tab-bottom-1" class="nav-link active" data-toggle="tab">Tab 1</a></li>
+                        <li class="nav-item"><a href="#tab-bottom-2" class="nav-link" data-toggle="tab">Tab 2</a></li>
+                        <li class="nav-item"><a href="#tab-bottom-3" class="nav-link" data-toggle="tab">Tab 3</a></li>
+                        <li class="nav-item"><a href="#tab-bottom-4" class="nav-link" data-toggle="tab">Tab 4</a></li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a></div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Card with bottom tabs","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n\n\n\n\n\n\n\n<!-- Cards with tabs component -->\n
+                        <div class=\"card-tabs\">\n   \n      \n
+                          <div class=\"tab-content\">\n   \n   <!-- Content of card #1 -->\n   
+                            <div id=\"tab-bottom-1\" class=\"card tab-pane active show\">\n      
+                              <div class=\"card-body\">\n         
+                                <div class=\"card-title\">Content of tab #1</div>
+                                \n         
+                                <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.\n         </p>
+                                \n      </div>
+                              \n   </div>
+                            \n   \n   <!-- Content of card #2 -->\n   
+                            <div id=\"tab-bottom-2\" class=\"card tab-pane\">\n      
+                              <div class=\"card-body\">\n         
+                                <div class=\"card-title\">Content of tab #2</div>
+                                \n         
+                                <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.\n         </p>
+                                \n      </div>
+                              \n   </div>
+                            \n   \n   <!-- Content of card #3 -->\n   
+                            <div id=\"tab-bottom-3\" class=\"card tab-pane\">\n      
+                              <div class=\"card-body\">\n         
+                                <div class=\"card-title\">Content of tab #3</div>
+                                \n         
+                                <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.\n         </p>
+                                \n      </div>
+                              \n   </div>
+                            \n   \n   <!-- Content of card #4 -->\n   
+                            <div id=\"tab-bottom-4\" class=\"card tab-pane\">\n      
+                              <div class=\"card-body\">\n         
+                                <div class=\"card-title\">Content of tab #4</div>
+                                \n         
+                                <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.\n         </p>
+                                \n      </div>
+                              \n   </div>
+                            \n   \n</div>
+                          \n\n      \n<!-- Cards navigation -->\n
+                          <ul class=\"nav nav-tabs nav-tabs-bottom\">\n   \n   
+                            <li class=\"nav-item\"><a href=\"#tab-bottom-1\" class=\"nav-link active\" data-toggle=\"tab\">Tab 1</a></li>
+                            \n   \n   
+                            <li class=\"nav-item\"><a href=\"#tab-bottom-2\" class=\"nav-link\" data-toggle=\"tab\">Tab 2</a></li>
+                            \n   \n   
+                            <li class=\"nav-item\"><a href=\"#tab-bottom-3\" class=\"nav-link\" data-toggle=\"tab\">Tab 3</a></li>
+                            \n   \n   
+                            <li class=\"nav-item\"><a href=\"#tab-bottom-4\" class=\"nav-link\" data-toggle=\"tab\">Tab 4</a></li>
+                            \n   \n</ul>
+                          \n\n   \n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-transparent">
+        <div class="container">
+          <div class="row text-center align-items-center flex-row-reverse">
+            <div class="col-lg-auto ml-lg-auto">
+              <ul class="list-inline list-inline-dots mb-0">
+                <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
+                <li class="list-inline-item"><a href="../faq.html" class="link-secondary">FAQ</a></li>
+                <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+              </ul>
+            </div>
+            <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+              Copyright © 2020
+              <a href=".." class="link-secondary">Tabler</a>.
+              All rights reserved.
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Customize Tabler</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
+          <div class="mb-3">
+            <label class="form-label">Color scheme</label>
+            <div class="form-hint">Light or dark presentation.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                Dark</button>
+            </div>
+          </div>
+          <div class="mb-4 text-muted">
+            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Navigation position</label>
+            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar size</label>
+            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar position</label>
+            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
+            </div>
+          </div>
+          <div>
+            <label class="form-label">Navigation color</label>
+            <div class="form-hint">Light or dark version of the sidebar </div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Libs JS -->
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1582373134"></script>
+  <script>
+    (function() {
+    	var navbarPrimary = document.getElementById('navbar-primary'),
+    		navbarSecondary = document.getElementById('navbar-secondary');
+    	var defaults = {
+    		theme: 'light',
+    		'navbar-position': 'horizontal',
+    		'navbar-size': 'wide',
+    		'navbar-side': 'left',
+    		'navbar-color': 'light',
+    	};
+    	var eventsClean = {
+    		'theme': function () {
+    			document.body.classList.remove('theme-dark');
+    		},
+    		'navbar-position': function () {
+    			navbarPrimary.classList.remove('navbar-vertical');
+    			navbarSecondary.classList.remove('d-none');
+    		},
+    		'navbar-size': function () {
+    			navbarPrimary.classList.remove('navbar-vertical-narrow');
+    		},
+    		'navbar-side': function () {
+    			navbarPrimary.classList.remove('navbar-right');
+    		},
+    		'navbar-color': function () {
+    			navbarPrimary.classList.remove('navbar-dark');
+    			navbarPrimary.classList.add('navbar-light');
+    		},
+    	};
+    	var events = {
+    		'theme:light': function () {
+    		},
+    		'theme:dark': function () {
+    			document.body.classList.add('theme-dark');
+    		},
+    		'navbar-position:vertical': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    			navbarSecondary.classList.add('d-none');
+    		},
+    		'navbar-position:horizontal': function () {
+    		},
+    		'navbar-position:both': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    		},
+    		'navbar-size:wide': function () {
+    		},
+    		'navbar-size:narrow': function () {
+    			navbarPrimary.classList.add('navbar-vertical-narrow');
+    		},
+    		'navbar-side:left': function () {
+    		},
+    		'navbar-side:right': function () {
+    			navbarPrimary.classList.add('navbar-right');
+    		},
+    		'navbar-color:light': function () {
+    		},
+    		'navbar-color:dark': function () {
+    			navbarPrimary.classList.add('navbar-dark');
+    			navbarPrimary.classList.remove('navbar-light');
+    		},
+    	};
+    	var updateThemeConfig = function (name) {
+    		var key, value;
+    		if (name) {
+    			[key, value] = name.split(':');
+    			setConfig(key, value);
+    		}
+    		applyConfig();
+    	};
+    	var disableTransitions = function () {
+    		document.body.classList.add('no-transitions');
+    		setTimeout(function () {
+    			document.body.classList.remove('no-transitions');
+    		}, 300);
+    	};
+    	var getConfig = function () {
+    		var config = {};
+    		for (var key in defaults) {
+    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
+    		}
+    		return config;
+    	};
+    	var setConfig = function (key, value) {
+    		localStorage.setItem('tabler-' + key, value);
+    	};
+    	var applyConfig = function () {
+    		disableTransitions();
+    		var config = getConfig();
+    		for (var key in config) {
+    			var value = config[key];
+    			eventsClean[key] && eventsClean[key].call();
+    			events[key + ':' + value] && events[key + ':' + value].call();
+    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
+    				activeTrigger.classList.remove('active')
+    			});
+    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
+    		}
+    	};
+    	applyConfig();
+    	for (var name in events) {
+    		var event = events[name];
+    		(function (event, name) {
+    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
+    				updateThemeConfig(name);
+    				event.call();
+    				e.preventDefault();
+    				return false;
+    			});
+    		})(event, name);
+    	}
+    })();
+  </script>
+  <script>
+    document.body.style.display = "block"
+  </script>
+</body>
+</html>

demo/components/card-with-image.html

@@ -0,0 +1,839 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.4
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Card with side image - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-with-image.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-with-image.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-with-image.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <div class="navbar-collapse collapse">
+            <h6 class="navbar-heading">Navigation</h6>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="../index.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Home</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="../form-elements.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  </span>
+                  <span class="nav-link-title">Form elements</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Base</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                  <li >
+                    <a class="dropdown-item" href="../empty.html" >
+                      Empty page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blank.html" >
+                      Blank page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps.html" >
+                      Maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps-vector.html" >
+                      Vector maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../datatables.html" >
+                      Data Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../calendar.html" >
+                      Calendar
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../lists.html" >
+                      Lists
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../users.html" >
+                      Users
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../gallery.html" >
+                      Gallery
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../profile.html" >
+                      Profile
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../music.html" >
+                      Music
+                    </a>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Authentication
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../sign-in.html" class="dropdown-item">Sign in</a>
+                      <a href="../sign-up.html" class="dropdown-item">Sign up</a>
+                      <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
+                      <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
+                    </div>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Error pages
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../400.html" class="dropdown-item">400 page</a>
+                      <a href="../401.html" class="dropdown-item">401 page</a>
+                      <a href="../403.html" class="dropdown-item">403 page</a>
+                      <a href="../404.html" class="dropdown-item">404 page</a>
+                      <a href="../500.html" class="dropdown-item">500 page</a>
+                      <a href="../503.html" class="dropdown-item">503 page</a>
+                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  </span>
+                  <span class="nav-link-title">Extra</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow">
+                  <li >
+                    <a class="dropdown-item" href="../invoice.html" >
+                      Invoice
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blog.html" >
+                      Blog cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../snippets.html" >
+                      Snippets
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../search-results.html" >
+                      Search results
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../pricing.html" >
+                      Pricing cards
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Docs</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                  <li >
+                    <a class="dropdown-item" href="../docs/index.html" >
+                      Introduction
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/alerts.html" >
+                      Alerts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/autosize.html" >
+                      Autosize
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/avatars.html" >
+                      Avatars
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/badges.html" >
+                      Badges
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                      Breadcrumb
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/colors.html" >
+                      Colors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/countup.html" >
+                      Countup
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cursors.html" >
+                      Cursors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/dropdowns.html" >
+                      Dropdowns
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/divider.html" >
+                      Divider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/empty.html" >
+                      Empty states
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/flags.html" >
+                      Flags
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-elements.html" >
+                      Form elements
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-helpers.html" >
+                      Form helpers
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/input-mask.html" >
+                      Form input mask
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/progress.html" >
+                      Progress
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/payments.html" >
+                      Payments
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/range-slider.html" >
+                      Range slider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/ribbons.html" >
+                      Ribbons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/spinners.html" >
+                      Spinners
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/steps.html" >
+                      Steps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tables.html" >
+                      Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tabs.html" >
+                      Tabs
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/timelines.html" >
+                      Timelines
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/toasts.html" >
+                      Toasts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tooltips.html" >
+                      Tooltips
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/typography.html" >
+                      Typography
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item d-none-navbar-vertical">
+                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Customize</span>
+                </a>
+              </li>
+            </ul>
+            <h6 class="navbar-heading mt-4">Tools</h6>
+            <div class="navbar-side">
+              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                Customize
+              </a>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <form class="form-inline w-50 mr-4 d-none d-md-flex">
+            <div class="input-icon w-100">
+              <span class="input-icon-addon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              </span>
+              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
+            </div>
+          </form>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <span class="flag flag-country-us mr-1"></span>
+                <span class="d-none d-lg-inline">English</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
+                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
+                  German</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
+                  Polish</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
+                  Japan</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
+                  Russian</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item dropdown pl-2">
+              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <div class="d-none d-lg-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">Founder</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="content">
+        <div class="container">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action active">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Card with side image</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div class="flex-fill" style="max-width: 572px">
+                        <div class="card">
+                          <div class="row row-0">
+                            <div class="col-md-3">
+                              <img src="../static/photos/2854fd67ddbd6217.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                            </div>
+                            <div class="col">
+                              <div class="card-body">
+                                <h3 class="card-title">Card with side image</h3>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                                  neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <div class="card">
+                      <div class="row row-0">
+                        <div class="col-md-3">
+                          <img src="../static/photos/2854fd67ddbd6217.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                        </div>
+                        <div class="col">
+                          <div class="card-body">
+                            <h3 class="card-title">Card with side image</h3>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                              neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a></div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Card with side image","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
+                        <div class=\"card\">\n   
+                          <div class=\"row row-0\">\n      
+                            <div class=\"col-md-3\">\n         <img src=\"../static/photos/2854fd67ddbd6217.jpg\" class=\"w-100 h-100 object-cover\" alt=\"Card side image\">\n      </div>
+                            \n      
+                            <div class=\"col\">\n         
+                              <div class=\"card-body\">\n            \n            
+                                <h3 class=\"card-title\">Card with side image</h3>
+                                \n            \n            
+                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima\n               neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                                \n         </div>
+                              \n      </div>
+                            \n   </div>
+                          \n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-transparent">
+        <div class="container">
+          <div class="row text-center align-items-center flex-row-reverse">
+            <div class="col-lg-auto ml-lg-auto">
+              <ul class="list-inline list-inline-dots mb-0">
+                <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
+                <li class="list-inline-item"><a href="../faq.html" class="link-secondary">FAQ</a></li>
+                <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+              </ul>
+            </div>
+            <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+              Copyright © 2020
+              <a href=".." class="link-secondary">Tabler</a>.
+              All rights reserved.
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Customize Tabler</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
+          <div class="mb-3">
+            <label class="form-label">Color scheme</label>
+            <div class="form-hint">Light or dark presentation.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                Dark</button>
+            </div>
+          </div>
+          <div class="mb-4 text-muted">
+            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Navigation position</label>
+            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar size</label>
+            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar position</label>
+            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
+            </div>
+          </div>
+          <div>
+            <label class="form-label">Navigation color</label>
+            <div class="form-hint">Light or dark version of the sidebar </div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Libs JS -->
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1582373134"></script>
+  <script>
+    (function() {
+    	var navbarPrimary = document.getElementById('navbar-primary'),
+    		navbarSecondary = document.getElementById('navbar-secondary');
+    	var defaults = {
+    		theme: 'light',
+    		'navbar-position': 'horizontal',
+    		'navbar-size': 'wide',
+    		'navbar-side': 'left',
+    		'navbar-color': 'light',
+    	};
+    	var eventsClean = {
+    		'theme': function () {
+    			document.body.classList.remove('theme-dark');
+    		},
+    		'navbar-position': function () {
+    			navbarPrimary.classList.remove('navbar-vertical');
+    			navbarSecondary.classList.remove('d-none');
+    		},
+    		'navbar-size': function () {
+    			navbarPrimary.classList.remove('navbar-vertical-narrow');
+    		},
+    		'navbar-side': function () {
+    			navbarPrimary.classList.remove('navbar-right');
+    		},
+    		'navbar-color': function () {
+    			navbarPrimary.classList.remove('navbar-dark');
+    			navbarPrimary.classList.add('navbar-light');
+    		},
+    	};
+    	var events = {
+    		'theme:light': function () {
+    		},
+    		'theme:dark': function () {
+    			document.body.classList.add('theme-dark');
+    		},
+    		'navbar-position:vertical': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    			navbarSecondary.classList.add('d-none');
+    		},
+    		'navbar-position:horizontal': function () {
+    		},
+    		'navbar-position:both': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    		},
+    		'navbar-size:wide': function () {
+    		},
+    		'navbar-size:narrow': function () {
+    			navbarPrimary.classList.add('navbar-vertical-narrow');
+    		},
+    		'navbar-side:left': function () {
+    		},
+    		'navbar-side:right': function () {
+    			navbarPrimary.classList.add('navbar-right');
+    		},
+    		'navbar-color:light': function () {
+    		},
+    		'navbar-color:dark': function () {
+    			navbarPrimary.classList.add('navbar-dark');
+    			navbarPrimary.classList.remove('navbar-light');
+    		},
+    	};
+    	var updateThemeConfig = function (name) {
+    		var key, value;
+    		if (name) {
+    			[key, value] = name.split(':');
+    			setConfig(key, value);
+    		}
+    		applyConfig();
+    	};
+    	var disableTransitions = function () {
+    		document.body.classList.add('no-transitions');
+    		setTimeout(function () {
+    			document.body.classList.remove('no-transitions');
+    		}, 300);
+    	};
+    	var getConfig = function () {
+    		var config = {};
+    		for (var key in defaults) {
+    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
+    		}
+    		return config;
+    	};
+    	var setConfig = function (key, value) {
+    		localStorage.setItem('tabler-' + key, value);
+    	};
+    	var applyConfig = function () {
+    		disableTransitions();
+    		var config = getConfig();
+    		for (var key in config) {
+    			var value = config[key];
+    			eventsClean[key] && eventsClean[key].call();
+    			events[key + ':' + value] && events[key + ':' + value].call();
+    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
+    				activeTrigger.classList.remove('active')
+    			});
+    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
+    		}
+    	};
+    	applyConfig();
+    	for (var name in events) {
+    		var event = events[name];
+    		(function (event, name) {
+    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
+    				updateThemeConfig(name);
+    				event.call();
+    				e.preventDefault();
+    				return false;
+    			});
+    		})(event, name);
+    	}
+    })();
+  </script>
+  <script>
+    document.body.style.display = "block"
+  </script>
+</body>
+</html>

demo/components/empty.html

@@ -0,0 +1,842 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.4
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Empty state - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/empty.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/empty.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/empty.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <div class="navbar-collapse collapse">
+            <h6 class="navbar-heading">Navigation</h6>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="../index.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Home</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="../form-elements.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  </span>
+                  <span class="nav-link-title">Form elements</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Base</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                  <li >
+                    <a class="dropdown-item" href="../empty.html" >
+                      Empty page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blank.html" >
+                      Blank page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps.html" >
+                      Maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps-vector.html" >
+                      Vector maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../datatables.html" >
+                      Data Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../calendar.html" >
+                      Calendar
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../lists.html" >
+                      Lists
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../users.html" >
+                      Users
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../gallery.html" >
+                      Gallery
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../profile.html" >
+                      Profile
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../music.html" >
+                      Music
+                    </a>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Authentication
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../sign-in.html" class="dropdown-item">Sign in</a>
+                      <a href="../sign-up.html" class="dropdown-item">Sign up</a>
+                      <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
+                      <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
+                    </div>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Error pages
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../400.html" class="dropdown-item">400 page</a>
+                      <a href="../401.html" class="dropdown-item">401 page</a>
+                      <a href="../403.html" class="dropdown-item">403 page</a>
+                      <a href="../404.html" class="dropdown-item">404 page</a>
+                      <a href="../500.html" class="dropdown-item">500 page</a>
+                      <a href="../503.html" class="dropdown-item">503 page</a>
+                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  </span>
+                  <span class="nav-link-title">Extra</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow">
+                  <li >
+                    <a class="dropdown-item" href="../invoice.html" >
+                      Invoice
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blog.html" >
+                      Blog cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../snippets.html" >
+                      Snippets
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../search-results.html" >
+                      Search results
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../pricing.html" >
+                      Pricing cards
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Docs</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                  <li >
+                    <a class="dropdown-item" href="../docs/index.html" >
+                      Introduction
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/alerts.html" >
+                      Alerts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/autosize.html" >
+                      Autosize
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/avatars.html" >
+                      Avatars
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/badges.html" >
+                      Badges
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                      Breadcrumb
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/colors.html" >
+                      Colors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/countup.html" >
+                      Countup
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cursors.html" >
+                      Cursors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/dropdowns.html" >
+                      Dropdowns
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/divider.html" >
+                      Divider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/empty.html" >
+                      Empty states
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/flags.html" >
+                      Flags
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-elements.html" >
+                      Form elements
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-helpers.html" >
+                      Form helpers
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/input-mask.html" >
+                      Form input mask
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/progress.html" >
+                      Progress
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/payments.html" >
+                      Payments
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/range-slider.html" >
+                      Range slider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/ribbons.html" >
+                      Ribbons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/spinners.html" >
+                      Spinners
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/steps.html" >
+                      Steps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tables.html" >
+                      Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tabs.html" >
+                      Tabs
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/timelines.html" >
+                      Timelines
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/toasts.html" >
+                      Toasts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tooltips.html" >
+                      Tooltips
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/typography.html" >
+                      Typography
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item d-none-navbar-vertical">
+                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Customize</span>
+                </a>
+              </li>
+            </ul>
+            <h6 class="navbar-heading mt-4">Tools</h6>
+            <div class="navbar-side">
+              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                Customize
+              </a>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <form class="form-inline w-50 mr-4 d-none d-md-flex">
+            <div class="input-icon w-100">
+              <span class="input-icon-addon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              </span>
+              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
+            </div>
+          </form>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <span class="flag flag-country-us mr-1"></span>
+                <span class="d-none d-lg-inline">English</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
+                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
+                  German</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
+                  Polish</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
+                  Japan</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
+                  Russian</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item dropdown pl-2">
+              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <div class="d-none d-lg-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">Founder</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="content">
+        <div class="container">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action active">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Empty state</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div >
+                        <div class="empty">
+                          <div class="empty-icon">
+                            <img src="../static/illustrations/undraw_quitting_time_dm8t.svg" class="h-8 mb-4" alt="">
+                          </div>
+                          <p class="empty-title h3">No results found</p>
+                          <p class="empty-subtitle text-muted">
+                            Try adjusting your search or filter to find what you're looking for.
+                          </p>
+                          <div class="empty-action">
+                            <a href="../." class="btn btn-primary">
+                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                              Search again
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <div class="empty">
+                      <div class="empty-icon">
+                        <img src="../static/illustrations/undraw_quitting_time_dm8t.svg" class="h-8 mb-4" alt="">
+                      </div>
+                      <p class="empty-title h3">No results found</p>
+                      <p class="empty-subtitle text-muted">
+                        Try adjusting your search or filter to find what you're looking for.
+                      </p>
+                      <div class="empty-action">
+                        <a href="../." class="btn btn-primary">
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                          Search again
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a></div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Empty state","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n
+                        <div class=\"empty\">\n   
+                          <div class=\"empty-icon\">\n      \n      \n      <img src=\"../static/illustrations/undraw_quitting_time_dm8t.svg\" class=\"h-8 mb-4\" alt=\"\">\n\n      \n   </div>
+                          \n\n   
+                          <p class=\"empty-title h3\">No results found</p>
+                          \n   
+                          <p class=\"empty-subtitle text-muted\">\n      Try adjusting your search or filter to find what youre looking for.\n   </p>
+                          \n   
+                          <div class=\"empty-action\">\n      \n      \n      <a href=\"../.\" class=\"btn btn-primary\">\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\nSearch again\n</a>\n   </div>
+                          \n</div>
+                        \n\n\n</div>
+                      \nre looking for.\n   </p>
+                    \n   
+                    <div class=\"empty-action\">\n      \n      \n      <a href=\"../.\" class=\"btn btn-primary\">\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\nSearch again\n</a>\n   </div>
+                    \n</div>
+                  \n\n\n</div>
+                \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                <button type="submit" class="btn btn-primary mt-4 btn-block">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  Edit in CodePen
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<footer class="footer footer-transparent">
+  <div class="container">
+    <div class="row text-center align-items-center flex-row-reverse">
+      <div class="col-lg-auto ml-lg-auto">
+        <ul class="list-inline list-inline-dots mb-0">
+          <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
+          <li class="list-inline-item"><a href="../faq.html" class="link-secondary">FAQ</a></li>
+          <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+        </ul>
+      </div>
+      <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+        Copyright © 2020
+        <a href=".." class="link-secondary">Tabler</a>.
+        All rights reserved.
+      </div>
+    </div>
+  </div>
+</footer>
+</div>
+</div>
+<div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Customize Tabler</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p class="text-muted">Set preferences that will be saved for your live preview.</p>
+        <div class="mb-3">
+          <label class="form-label">Color scheme</label>
+          <div class="form-hint">Light or dark presentation.</div>
+          <div class="btn-group w-100">
+            <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+              Light</button>
+            <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+              Dark</button>
+          </div>
+        </div>
+        <div class="mb-4 text-muted">
+          You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
+        </div>
+        <div class="mb-3">
+          <label class="form-label">Navigation position</label>
+          <div class="form-hint">Choose where the main navigation in your project should be located.</div>
+          <div class="btn-group w-100">
+            <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
+            <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
+            <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
+          </div>
+        </div>
+        <div class="mb-3">
+          <label class="form-label">Sidebar size</label>
+          <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
+          <div class="btn-group w-100">
+            <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
+            <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
+          </div>
+        </div>
+        <div class="mb-3">
+          <label class="form-label">Sidebar position</label>
+          <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
+          <div class="btn-group w-100">
+            <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
+            <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
+          </div>
+        </div>
+        <div>
+          <label class="form-label">Navigation color</label>
+          <div class="form-hint">Light or dark version of the sidebar </div>
+          <div class="btn-group w-100">
+            <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
+            <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- Libs JS -->
+<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
+<script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
+<!-- Tabler Core -->
+<script src="../dist/js/tabler.min.js?1582373134"></script>
+<script>
+  (function() {
+  	var navbarPrimary = document.getElementById('navbar-primary'),
+  		navbarSecondary = document.getElementById('navbar-secondary');
+  	var defaults = {
+  		theme: 'light',
+  		'navbar-position': 'horizontal',
+  		'navbar-size': 'wide',
+  		'navbar-side': 'left',
+  		'navbar-color': 'light',
+  	};
+  	var eventsClean = {
+  		'theme': function () {
+  			document.body.classList.remove('theme-dark');
+  		},
+  		'navbar-position': function () {
+  			navbarPrimary.classList.remove('navbar-vertical');
+  			navbarSecondary.classList.remove('d-none');
+  		},
+  		'navbar-size': function () {
+  			navbarPrimary.classList.remove('navbar-vertical-narrow');
+  		},
+  		'navbar-side': function () {
+  			navbarPrimary.classList.remove('navbar-right');
+  		},
+  		'navbar-color': function () {
+  			navbarPrimary.classList.remove('navbar-dark');
+  			navbarPrimary.classList.add('navbar-light');
+  		},
+  	};
+  	var events = {
+  		'theme:light': function () {
+  		},
+  		'theme:dark': function () {
+  			document.body.classList.add('theme-dark');
+  		},
+  		'navbar-position:vertical': function () {
+  			navbarPrimary.classList.add('navbar-vertical');
+  			navbarSecondary.classList.add('d-none');
+  		},
+  		'navbar-position:horizontal': function () {
+  		},
+  		'navbar-position:both': function () {
+  			navbarPrimary.classList.add('navbar-vertical');
+  		},
+  		'navbar-size:wide': function () {
+  		},
+  		'navbar-size:narrow': function () {
+  			navbarPrimary.classList.add('navbar-vertical-narrow');
+  		},
+  		'navbar-side:left': function () {
+  		},
+  		'navbar-side:right': function () {
+  			navbarPrimary.classList.add('navbar-right');
+  		},
+  		'navbar-color:light': function () {
+  		},
+  		'navbar-color:dark': function () {
+  			navbarPrimary.classList.add('navbar-dark');
+  			navbarPrimary.classList.remove('navbar-light');
+  		},
+  	};
+  	var updateThemeConfig = function (name) {
+  		var key, value;
+  		if (name) {
+  			[key, value] = name.split(':');
+  			setConfig(key, value);
+  		}
+  		applyConfig();
+  	};
+  	var disableTransitions = function () {
+  		document.body.classList.add('no-transitions');
+  		setTimeout(function () {
+  			document.body.classList.remove('no-transitions');
+  		}, 300);
+  	};
+  	var getConfig = function () {
+  		var config = {};
+  		for (var key in defaults) {
+  			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
+  		}
+  		return config;
+  	};
+  	var setConfig = function (key, value) {
+  		localStorage.setItem('tabler-' + key, value);
+  	};
+  	var applyConfig = function () {
+  		disableTransitions();
+  		var config = getConfig();
+  		for (var key in config) {
+  			var value = config[key];
+  			eventsClean[key] && eventsClean[key].call();
+  			events[key + ':' + value] && events[key + ':' + value].call();
+  			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
+  				activeTrigger.classList.remove('active')
+  			});
+  			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
+  		}
+  	};
+  	applyConfig();
+  	for (var name in events) {
+  		var event = events[name];
+  		(function (event, name) {
+  			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
+  				updateThemeConfig(name);
+  				event.call();
+  				e.preventDefault();
+  				return false;
+  			});
+  		})(event, name);
+  	}
+  })();
+</script>
+<script>
+  document.body.style.display = "block"
+</script>
+</body>
+</html>

demo/components/index.html

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

@@ -0,0 +1,965 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.4
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Color input - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/input-colors.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/input-colors.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/input-colors.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <div class="navbar-collapse collapse">
+            <h6 class="navbar-heading">Navigation</h6>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="../index.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Home</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="../form-elements.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  </span>
+                  <span class="nav-link-title">Form elements</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Base</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                  <li >
+                    <a class="dropdown-item" href="../empty.html" >
+                      Empty page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blank.html" >
+                      Blank page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps.html" >
+                      Maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps-vector.html" >
+                      Vector maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../datatables.html" >
+                      Data Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../calendar.html" >
+                      Calendar
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../lists.html" >
+                      Lists
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../users.html" >
+                      Users
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../gallery.html" >
+                      Gallery
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../profile.html" >
+                      Profile
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../music.html" >
+                      Music
+                    </a>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Authentication
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../sign-in.html" class="dropdown-item">Sign in</a>
+                      <a href="../sign-up.html" class="dropdown-item">Sign up</a>
+                      <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
+                      <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
+                    </div>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Error pages
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../400.html" class="dropdown-item">400 page</a>
+                      <a href="../401.html" class="dropdown-item">401 page</a>
+                      <a href="../403.html" class="dropdown-item">403 page</a>
+                      <a href="../404.html" class="dropdown-item">404 page</a>
+                      <a href="../500.html" class="dropdown-item">500 page</a>
+                      <a href="../503.html" class="dropdown-item">503 page</a>
+                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  </span>
+                  <span class="nav-link-title">Extra</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow">
+                  <li >
+                    <a class="dropdown-item" href="../invoice.html" >
+                      Invoice
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blog.html" >
+                      Blog cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../snippets.html" >
+                      Snippets
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../search-results.html" >
+                      Search results
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../pricing.html" >
+                      Pricing cards
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Docs</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                  <li >
+                    <a class="dropdown-item" href="../docs/index.html" >
+                      Introduction
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/alerts.html" >
+                      Alerts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/autosize.html" >
+                      Autosize
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/avatars.html" >
+                      Avatars
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/badges.html" >
+                      Badges
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                      Breadcrumb
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/colors.html" >
+                      Colors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/countup.html" >
+                      Countup
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cursors.html" >
+                      Cursors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/dropdowns.html" >
+                      Dropdowns
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/divider.html" >
+                      Divider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/empty.html" >
+                      Empty states
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/flags.html" >
+                      Flags
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-elements.html" >
+                      Form elements
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-helpers.html" >
+                      Form helpers
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/input-mask.html" >
+                      Form input mask
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/progress.html" >
+                      Progress
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/payments.html" >
+                      Payments
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/range-slider.html" >
+                      Range slider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/ribbons.html" >
+                      Ribbons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/spinners.html" >
+                      Spinners
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/steps.html" >
+                      Steps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tables.html" >
+                      Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tabs.html" >
+                      Tabs
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/timelines.html" >
+                      Timelines
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/toasts.html" >
+                      Toasts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tooltips.html" >
+                      Tooltips
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/typography.html" >
+                      Typography
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item d-none-navbar-vertical">
+                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Customize</span>
+                </a>
+              </li>
+            </ul>
+            <h6 class="navbar-heading mt-4">Tools</h6>
+            <div class="navbar-side">
+              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                Customize
+              </a>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <form class="form-inline w-50 mr-4 d-none d-md-flex">
+            <div class="input-icon w-100">
+              <span class="input-icon-addon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              </span>
+              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
+            </div>
+          </form>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <span class="flag flag-country-us mr-1"></span>
+                <span class="d-none d-lg-inline">English</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
+                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
+                  German</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
+                  Polish</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
+                  Japan</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
+                  Russian</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item dropdown pl-2">
+              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <div class="d-none d-lg-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">Founder</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="content">
+        <div class="container">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action active">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Color input</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div >
+                        <div class="mb-3">
+                          <label class="form-label">Color Input</label>
+                          <div class="row row-sm">
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="dark" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-dark"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput form-colorinput-light">
+                                <input name="color" type="radio" value="white" class="form-colorinput-input"  checked/>
+                                <span class="form-colorinput-color bg-white"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="blue" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-blue"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="azure" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-azure"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="indigo" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-indigo"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="purple" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-purple"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="pink" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-pink"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="red" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-red"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="orange" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-orange"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="yellow" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-yellow"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="lime" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-lime"></span>
+                              </label>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <div class="mb-3">
+                      <label class="form-label">Color Input</label>
+                      <div class="row row-sm">
+                        <div class="col-auto">
+                          <label class="form-colorinput">
+                            <input name="color" type="radio" value="dark" class="form-colorinput-input" />
+                            <span class="form-colorinput-color bg-dark"></span>
+                          </label>
+                        </div>
+                        <div class="col-auto">
+                          <label class="form-colorinput form-colorinput-light">
+                            <input name="color" type="radio" value="white" class="form-colorinput-input"  checked/>
+                            <span class="form-colorinput-color bg-white"></span>
+                          </label>
+                        </div>
+                        <div class="col-auto">
+                          <label class="form-colorinput">
+                            <input name="color" type="radio" value="blue" class="form-colorinput-input" />
+                            <span class="form-colorinput-color bg-blue"></span>
+                          </label>
+                        </div>
+                        <div class="col-auto">
+                          <label class="form-colorinput">
+                            <input name="color" type="radio" value="azure" class="form-colorinput-input" />
+                            <span class="form-colorinput-color bg-azure"></span>
+                          </label>
+                        </div>
+                        <div class="col-auto">
+                          <label class="form-colorinput">
+                            <input name="color" type="radio" value="indigo" class="form-colorinput-input" />
+                            <span class="form-colorinput-color bg-indigo"></span>
+                          </label>
+                        </div>
+                        <div class="col-auto">
+                          <label class="form-colorinput">
+                            <input name="color" type="radio" value="purple" class="form-colorinput-input" />
+                            <span class="form-colorinput-color bg-purple"></span>
+                          </label>
+                        </div>
+                        <div class="col-auto">
+                          <label class="form-colorinput">
+                            <input name="color" type="radio" value="pink" class="form-colorinput-input" />
+                            <span class="form-colorinput-color bg-pink"></span>
+                          </label>
+                        </div>
+                        <div class="col-auto">
+                          <label class="form-colorinput">
+                            <input name="color" type="radio" value="red" class="form-colorinput-input" />
+                            <span class="form-colorinput-color bg-red"></span>
+                          </label>
+                        </div>
+                        <div class="col-auto">
+                          <label class="form-colorinput">
+                            <input name="color" type="radio" value="orange" class="form-colorinput-input" />
+                            <span class="form-colorinput-color bg-orange"></span>
+                          </label>
+                        </div>
+                        <div class="col-auto">
+                          <label class="form-colorinput">
+                            <input name="color" type="radio" value="yellow" class="form-colorinput-input" />
+                            <span class="form-colorinput-color bg-yellow"></span>
+                          </label>
+                        </div>
+                        <div class="col-auto">
+                          <label class="form-colorinput">
+                            <input name="color" type="radio" value="lime" class="form-colorinput-input" />
+                            <span class="form-colorinput-color bg-lime"></span>
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a></div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Color input","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n\n\n
+                        <div class=\"mb-3\">\n\t<label class=\"form-label\">Color Input</label>\n\t
+                          <div class=\"row row-sm\">\n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"radio\" value=\"dark\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-dark\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput form-colorinput-light\">\n\t\t\t\t<input name=\"color\" type=\"radio\" value=\"white\" class=\"form-colorinput-input\"  checked/>\n\t\t\t\t<span class=\"form-colorinput-color bg-white\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"radio\" value=\"blue\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-blue\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"radio\" value=\"azure\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-azure\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"radio\" value=\"indigo\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-indigo\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"radio\" value=\"purple\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-purple\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"radio\" value=\"pink\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-pink\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"radio\" value=\"red\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-red\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"radio\" value=\"orange\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-orange\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"radio\" value=\"yellow\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-yellow\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"radio\" value=\"lime\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-lime\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t</div>
+                          \n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-transparent">
+        <div class="container">
+          <div class="row text-center align-items-center flex-row-reverse">
+            <div class="col-lg-auto ml-lg-auto">
+              <ul class="list-inline list-inline-dots mb-0">
+                <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
+                <li class="list-inline-item"><a href="../faq.html" class="link-secondary">FAQ</a></li>
+                <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+              </ul>
+            </div>
+            <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+              Copyright © 2020
+              <a href=".." class="link-secondary">Tabler</a>.
+              All rights reserved.
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Customize Tabler</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
+          <div class="mb-3">
+            <label class="form-label">Color scheme</label>
+            <div class="form-hint">Light or dark presentation.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                Dark</button>
+            </div>
+          </div>
+          <div class="mb-4 text-muted">
+            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Navigation position</label>
+            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar size</label>
+            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar position</label>
+            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
+            </div>
+          </div>
+          <div>
+            <label class="form-label">Navigation color</label>
+            <div class="form-hint">Light or dark version of the sidebar </div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Libs JS -->
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1582373134"></script>
+  <script>
+    (function() {
+    	var navbarPrimary = document.getElementById('navbar-primary'),
+    		navbarSecondary = document.getElementById('navbar-secondary');
+    	var defaults = {
+    		theme: 'light',
+    		'navbar-position': 'horizontal',
+    		'navbar-size': 'wide',
+    		'navbar-side': 'left',
+    		'navbar-color': 'light',
+    	};
+    	var eventsClean = {
+    		'theme': function () {
+    			document.body.classList.remove('theme-dark');
+    		},
+    		'navbar-position': function () {
+    			navbarPrimary.classList.remove('navbar-vertical');
+    			navbarSecondary.classList.remove('d-none');
+    		},
+    		'navbar-size': function () {
+    			navbarPrimary.classList.remove('navbar-vertical-narrow');
+    		},
+    		'navbar-side': function () {
+    			navbarPrimary.classList.remove('navbar-right');
+    		},
+    		'navbar-color': function () {
+    			navbarPrimary.classList.remove('navbar-dark');
+    			navbarPrimary.classList.add('navbar-light');
+    		},
+    	};
+    	var events = {
+    		'theme:light': function () {
+    		},
+    		'theme:dark': function () {
+    			document.body.classList.add('theme-dark');
+    		},
+    		'navbar-position:vertical': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    			navbarSecondary.classList.add('d-none');
+    		},
+    		'navbar-position:horizontal': function () {
+    		},
+    		'navbar-position:both': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    		},
+    		'navbar-size:wide': function () {
+    		},
+    		'navbar-size:narrow': function () {
+    			navbarPrimary.classList.add('navbar-vertical-narrow');
+    		},
+    		'navbar-side:left': function () {
+    		},
+    		'navbar-side:right': function () {
+    			navbarPrimary.classList.add('navbar-right');
+    		},
+    		'navbar-color:light': function () {
+    		},
+    		'navbar-color:dark': function () {
+    			navbarPrimary.classList.add('navbar-dark');
+    			navbarPrimary.classList.remove('navbar-light');
+    		},
+    	};
+    	var updateThemeConfig = function (name) {
+    		var key, value;
+    		if (name) {
+    			[key, value] = name.split(':');
+    			setConfig(key, value);
+    		}
+    		applyConfig();
+    	};
+    	var disableTransitions = function () {
+    		document.body.classList.add('no-transitions');
+    		setTimeout(function () {
+    			document.body.classList.remove('no-transitions');
+    		}, 300);
+    	};
+    	var getConfig = function () {
+    		var config = {};
+    		for (var key in defaults) {
+    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
+    		}
+    		return config;
+    	};
+    	var setConfig = function (key, value) {
+    		localStorage.setItem('tabler-' + key, value);
+    	};
+    	var applyConfig = function () {
+    		disableTransitions();
+    		var config = getConfig();
+    		for (var key in config) {
+    			var value = config[key];
+    			eventsClean[key] && eventsClean[key].call();
+    			events[key + ':' + value] && events[key + ':' + value].call();
+    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
+    				activeTrigger.classList.remove('active')
+    			});
+    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
+    		}
+    	};
+    	applyConfig();
+    	for (var name in events) {
+    		var event = events[name];
+    		(function (event, name) {
+    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
+    				updateThemeConfig(name);
+    				event.call();
+    				e.preventDefault();
+    				return false;
+    			});
+    		})(event, name);
+    	}
+    })();
+  </script>
+  <script>
+    document.body.style.display = "block"
+  </script>
+</body>
+</html>

demo/components/input-image.html

@@ -0,0 +1,973 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.4
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Image input - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/input-image.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/input-image.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/input-image.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <div class="navbar-collapse collapse">
+            <h6 class="navbar-heading">Navigation</h6>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="../index.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Home</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="../form-elements.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  </span>
+                  <span class="nav-link-title">Form elements</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Base</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                  <li >
+                    <a class="dropdown-item" href="../empty.html" >
+                      Empty page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blank.html" >
+                      Blank page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps.html" >
+                      Maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps-vector.html" >
+                      Vector maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../datatables.html" >
+                      Data Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../calendar.html" >
+                      Calendar
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../lists.html" >
+                      Lists
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../users.html" >
+                      Users
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../gallery.html" >
+                      Gallery
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../profile.html" >
+                      Profile
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../music.html" >
+                      Music
+                    </a>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Authentication
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../sign-in.html" class="dropdown-item">Sign in</a>
+                      <a href="../sign-up.html" class="dropdown-item">Sign up</a>
+                      <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
+                      <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
+                    </div>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Error pages
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../400.html" class="dropdown-item">400 page</a>
+                      <a href="../401.html" class="dropdown-item">401 page</a>
+                      <a href="../403.html" class="dropdown-item">403 page</a>
+                      <a href="../404.html" class="dropdown-item">404 page</a>
+                      <a href="../500.html" class="dropdown-item">500 page</a>
+                      <a href="../503.html" class="dropdown-item">503 page</a>
+                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  </span>
+                  <span class="nav-link-title">Extra</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow">
+                  <li >
+                    <a class="dropdown-item" href="../invoice.html" >
+                      Invoice
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blog.html" >
+                      Blog cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../snippets.html" >
+                      Snippets
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../search-results.html" >
+                      Search results
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../pricing.html" >
+                      Pricing cards
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Docs</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                  <li >
+                    <a class="dropdown-item" href="../docs/index.html" >
+                      Introduction
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/alerts.html" >
+                      Alerts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/autosize.html" >
+                      Autosize
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/avatars.html" >
+                      Avatars
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/badges.html" >
+                      Badges
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                      Breadcrumb
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/colors.html" >
+                      Colors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/countup.html" >
+                      Countup
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cursors.html" >
+                      Cursors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/dropdowns.html" >
+                      Dropdowns
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/divider.html" >
+                      Divider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/empty.html" >
+                      Empty states
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/flags.html" >
+                      Flags
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-elements.html" >
+                      Form elements
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-helpers.html" >
+                      Form helpers
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/input-mask.html" >
+                      Form input mask
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/progress.html" >
+                      Progress
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/payments.html" >
+                      Payments
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/range-slider.html" >
+                      Range slider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/ribbons.html" >
+                      Ribbons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/spinners.html" >
+                      Spinners
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/steps.html" >
+                      Steps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tables.html" >
+                      Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tabs.html" >
+                      Tabs
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/timelines.html" >
+                      Timelines
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/toasts.html" >
+                      Toasts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tooltips.html" >
+                      Tooltips
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/typography.html" >
+                      Typography
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item d-none-navbar-vertical">
+                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Customize</span>
+                </a>
+              </li>
+            </ul>
+            <h6 class="navbar-heading mt-4">Tools</h6>
+            <div class="navbar-side">
+              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                Customize
+              </a>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <form class="form-inline w-50 mr-4 d-none d-md-flex">
+            <div class="input-icon w-100">
+              <span class="input-icon-addon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              </span>
+              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
+            </div>
+          </form>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <span class="flag flag-country-us mr-1"></span>
+                <span class="d-none d-lg-inline">English</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
+                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
+                  German</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
+                  Polish</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
+                  Japan</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
+                  Russian</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item dropdown pl-2">
+              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <div class="d-none d-lg-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">Founder</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="content">
+        <div class="container">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action active">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Image input</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div class="flex-fill" style="max-width: 572px">
+                        <div class="mb-3">
+                          <label class="form-label">Image Check</label>
+                          <div class="row row-sm">
+                            <div class="col-6 col-sm-4">
+                              <label class="form-imagecheck mb-2">
+                                <input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
+                                <span class="form-imagecheck-figure">
+                                  <img src="../static/photos/1b73704b282a8ec6.jpg" alt="Breakfast served with tea, bread and eggs" class="form-imagecheck-image">
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-6 col-sm-4">
+                              <label class="form-imagecheck mb-2">
+                                <input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input"  checked/>
+                                <span class="form-imagecheck-figure">
+                                  <img src="../static/photos/3d2998219313cd37.jpg" alt="Book, fairy lights" class="form-imagecheck-image">
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-6 col-sm-4">
+                              <label class="form-imagecheck mb-2">
+                                <input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
+                                <span class="form-imagecheck-figure">
+                                  <img src="../static/photos/6ab3200b14549f8a.jpg" alt="Healthy Dinner" class="form-imagecheck-image">
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-6 col-sm-4">
+                              <label class="form-imagecheck mb-2">
+                                <input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input"  checked/>
+                                <span class="form-imagecheck-figure">
+                                  <img src="../static/photos/6d35d9a2bd6c63c2.jpg" alt="Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water" class="form-imagecheck-image">
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-6 col-sm-4">
+                              <label class="form-imagecheck mb-2">
+                                <input name="form-imagecheck" type="checkbox" value="5" class="form-imagecheck-input" />
+                                <span class="form-imagecheck-figure">
+                                  <img src="../static/photos/8a26974ee6444acd.jpg" alt="Beautiful blonde woman on a wooden pier by the lake" class="form-imagecheck-image">
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-6 col-sm-4">
+                              <label class="form-imagecheck mb-2">
+                                <input name="form-imagecheck" type="checkbox" value="6" class="form-imagecheck-input" />
+                                <span class="form-imagecheck-figure">
+                                  <img src="../static/photos/8c13ad59f739558c.jpg" alt="Still life of mandarin oranges with leaves" class="form-imagecheck-image">
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-6 col-sm-4">
+                              <label class="form-imagecheck mb-2">
+                                <input name="form-imagecheck" type="checkbox" value="7" class="form-imagecheck-input"  checked/>
+                                <span class="form-imagecheck-figure">
+                                  <img src="../static/photos/8fdeb4785d2b82ef.jpg" alt="Blonde woman having a healthy snack at the wooden pier" class="form-imagecheck-image">
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-6 col-sm-4">
+                              <label class="form-imagecheck mb-2">
+                                <input name="form-imagecheck" type="checkbox" value="8" class="form-imagecheck-input" />
+                                <span class="form-imagecheck-figure">
+                                  <img src="../static/photos/9f36332564ca271d.jpg" alt="Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed" class="form-imagecheck-image">
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-6 col-sm-4">
+                              <label class="form-imagecheck mb-2">
+                                <input name="form-imagecheck" type="checkbox" value="9" class="form-imagecheck-input" />
+                                <span class="form-imagecheck-figure">
+                                  <img src="../static/photos/35b88fc04a518c1b.jpg" alt="Overhead view of macarons on a marble slab" class="form-imagecheck-image">
+                                </span>
+                              </label>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <div class="mb-3">
+                      <label class="form-label">Image Check</label>
+                      <div class="row row-sm">
+                        <div class="col-6 col-sm-4">
+                          <label class="form-imagecheck mb-2">
+                            <input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
+                            <span class="form-imagecheck-figure">
+                              <img src="../static/photos/1b73704b282a8ec6.jpg" alt="Breakfast served with tea, bread and eggs" class="form-imagecheck-image">
+                            </span>
+                          </label>
+                        </div>
+                        <div class="col-6 col-sm-4">
+                          <label class="form-imagecheck mb-2">
+                            <input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input"  checked/>
+                            <span class="form-imagecheck-figure">
+                              <img src="../static/photos/3d2998219313cd37.jpg" alt="Book, fairy lights" class="form-imagecheck-image">
+                            </span>
+                          </label>
+                        </div>
+                        <div class="col-6 col-sm-4">
+                          <label class="form-imagecheck mb-2">
+                            <input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
+                            <span class="form-imagecheck-figure">
+                              <img src="../static/photos/6ab3200b14549f8a.jpg" alt="Healthy Dinner" class="form-imagecheck-image">
+                            </span>
+                          </label>
+                        </div>
+                        <div class="col-6 col-sm-4">
+                          <label class="form-imagecheck mb-2">
+                            <input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input"  checked/>
+                            <span class="form-imagecheck-figure">
+                              <img src="../static/photos/6d35d9a2bd6c63c2.jpg" alt="Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water" class="form-imagecheck-image">
+                            </span>
+                          </label>
+                        </div>
+                        <div class="col-6 col-sm-4">
+                          <label class="form-imagecheck mb-2">
+                            <input name="form-imagecheck" type="checkbox" value="5" class="form-imagecheck-input" />
+                            <span class="form-imagecheck-figure">
+                              <img src="../static/photos/8a26974ee6444acd.jpg" alt="Beautiful blonde woman on a wooden pier by the lake" class="form-imagecheck-image">
+                            </span>
+                          </label>
+                        </div>
+                        <div class="col-6 col-sm-4">
+                          <label class="form-imagecheck mb-2">
+                            <input name="form-imagecheck" type="checkbox" value="6" class="form-imagecheck-input" />
+                            <span class="form-imagecheck-figure">
+                              <img src="../static/photos/8c13ad59f739558c.jpg" alt="Still life of mandarin oranges with leaves" class="form-imagecheck-image">
+                            </span>
+                          </label>
+                        </div>
+                        <div class="col-6 col-sm-4">
+                          <label class="form-imagecheck mb-2">
+                            <input name="form-imagecheck" type="checkbox" value="7" class="form-imagecheck-input"  checked/>
+                            <span class="form-imagecheck-figure">
+                              <img src="../static/photos/8fdeb4785d2b82ef.jpg" alt="Blonde woman having a healthy snack at the wooden pier" class="form-imagecheck-image">
+                            </span>
+                          </label>
+                        </div>
+                        <div class="col-6 col-sm-4">
+                          <label class="form-imagecheck mb-2">
+                            <input name="form-imagecheck" type="checkbox" value="8" class="form-imagecheck-input" />
+                            <span class="form-imagecheck-figure">
+                              <img src="../static/photos/9f36332564ca271d.jpg" alt="Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed" class="form-imagecheck-image">
+                            </span>
+                          </label>
+                        </div>
+                        <div class="col-6 col-sm-4">
+                          <label class="form-imagecheck mb-2">
+                            <input name="form-imagecheck" type="checkbox" value="9" class="form-imagecheck-input" />
+                            <span class="form-imagecheck-figure">
+                              <img src="../static/photos/35b88fc04a518c1b.jpg" alt="Overhead view of macarons on a marble slab" class="form-imagecheck-image">
+                            </span>
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a></div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Image input","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n
+                        <div class=\"mb-3\">\n\t<label class=\"form-label\">Image Check</label>\n\t
+                          <div class=\"row row-sm\">\n\t\t\n\n\t\t\n\t\t
+                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"1\" class=\"form-imagecheck-input\" />\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/1b73704b282a8ec6.jpg\" alt=\"Breakfast served with tea, bread and eggs\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"2\" class=\"form-imagecheck-input\"  checked/>\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/3d2998219313cd37.jpg\" alt=\"Book, fairy lights\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"3\" class=\"form-imagecheck-input\" />\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/6ab3200b14549f8a.jpg\" alt=\"Healthy Dinner\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"4\" class=\"form-imagecheck-input\"  checked/>\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/6d35d9a2bd6c63c2.jpg\" alt=\"Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"5\" class=\"form-imagecheck-input\" />\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/8a26974ee6444acd.jpg\" alt=\"Beautiful blonde woman on a wooden pier by the lake\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"6\" class=\"form-imagecheck-input\" />\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/8c13ad59f739558c.jpg\" alt=\"Still life of mandarin oranges with leaves\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"7\" class=\"form-imagecheck-input\"  checked/>\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/8fdeb4785d2b82ef.jpg\" alt=\"Blonde woman having a healthy snack at the wooden pier\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"8\" class=\"form-imagecheck-input\" />\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/9f36332564ca271d.jpg\" alt=\"Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"9\" class=\"form-imagecheck-input\" />\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/35b88fc04a518c1b.jpg\" alt=\"Overhead view of macarons on a marble slab\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t</div>
+                          \n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-transparent">
+        <div class="container">
+          <div class="row text-center align-items-center flex-row-reverse">
+            <div class="col-lg-auto ml-lg-auto">
+              <ul class="list-inline list-inline-dots mb-0">
+                <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
+                <li class="list-inline-item"><a href="../faq.html" class="link-secondary">FAQ</a></li>
+                <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+              </ul>
+            </div>
+            <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+              Copyright © 2020
+              <a href=".." class="link-secondary">Tabler</a>.
+              All rights reserved.
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Customize Tabler</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
+          <div class="mb-3">
+            <label class="form-label">Color scheme</label>
+            <div class="form-hint">Light or dark presentation.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                Dark</button>
+            </div>
+          </div>
+          <div class="mb-4 text-muted">
+            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Navigation position</label>
+            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar size</label>
+            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar position</label>
+            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
+            </div>
+          </div>
+          <div>
+            <label class="form-label">Navigation color</label>
+            <div class="form-hint">Light or dark version of the sidebar </div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Libs JS -->
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1582373134"></script>
+  <script>
+    (function() {
+    	var navbarPrimary = document.getElementById('navbar-primary'),
+    		navbarSecondary = document.getElementById('navbar-secondary');
+    	var defaults = {
+    		theme: 'light',
+    		'navbar-position': 'horizontal',
+    		'navbar-size': 'wide',
+    		'navbar-side': 'left',
+    		'navbar-color': 'light',
+    	};
+    	var eventsClean = {
+    		'theme': function () {
+    			document.body.classList.remove('theme-dark');
+    		},
+    		'navbar-position': function () {
+    			navbarPrimary.classList.remove('navbar-vertical');
+    			navbarSecondary.classList.remove('d-none');
+    		},
+    		'navbar-size': function () {
+    			navbarPrimary.classList.remove('navbar-vertical-narrow');
+    		},
+    		'navbar-side': function () {
+    			navbarPrimary.classList.remove('navbar-right');
+    		},
+    		'navbar-color': function () {
+    			navbarPrimary.classList.remove('navbar-dark');
+    			navbarPrimary.classList.add('navbar-light');
+    		},
+    	};
+    	var events = {
+    		'theme:light': function () {
+    		},
+    		'theme:dark': function () {
+    			document.body.classList.add('theme-dark');
+    		},
+    		'navbar-position:vertical': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    			navbarSecondary.classList.add('d-none');
+    		},
+    		'navbar-position:horizontal': function () {
+    		},
+    		'navbar-position:both': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    		},
+    		'navbar-size:wide': function () {
+    		},
+    		'navbar-size:narrow': function () {
+    			navbarPrimary.classList.add('navbar-vertical-narrow');
+    		},
+    		'navbar-side:left': function () {
+    		},
+    		'navbar-side:right': function () {
+    			navbarPrimary.classList.add('navbar-right');
+    		},
+    		'navbar-color:light': function () {
+    		},
+    		'navbar-color:dark': function () {
+    			navbarPrimary.classList.add('navbar-dark');
+    			navbarPrimary.classList.remove('navbar-light');
+    		},
+    	};
+    	var updateThemeConfig = function (name) {
+    		var key, value;
+    		if (name) {
+    			[key, value] = name.split(':');
+    			setConfig(key, value);
+    		}
+    		applyConfig();
+    	};
+    	var disableTransitions = function () {
+    		document.body.classList.add('no-transitions');
+    		setTimeout(function () {
+    			document.body.classList.remove('no-transitions');
+    		}, 300);
+    	};
+    	var getConfig = function () {
+    		var config = {};
+    		for (var key in defaults) {
+    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
+    		}
+    		return config;
+    	};
+    	var setConfig = function (key, value) {
+    		localStorage.setItem('tabler-' + key, value);
+    	};
+    	var applyConfig = function () {
+    		disableTransitions();
+    		var config = getConfig();
+    		for (var key in config) {
+    			var value = config[key];
+    			eventsClean[key] && eventsClean[key].call();
+    			events[key + ':' + value] && events[key + ':' + value].call();
+    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
+    				activeTrigger.classList.remove('active')
+    			});
+    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
+    		}
+    	};
+    	applyConfig();
+    	for (var name in events) {
+    		var event = events[name];
+    		(function (event, name) {
+    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
+    				updateThemeConfig(name);
+    				event.call();
+    				e.preventDefault();
+    				return false;
+    			});
+    		})(event, name);
+    	}
+    })();
+  </script>
+  <script>
+    document.body.style.display = "block"
+  </script>
+</body>
+</html>

demo/components/progress.html

@@ -0,0 +1,925 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.4
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Progress bar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/progress.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/progress.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/progress.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <div class="navbar-collapse collapse">
+            <h6 class="navbar-heading">Navigation</h6>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="../index.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Home</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="../form-elements.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  </span>
+                  <span class="nav-link-title">Form elements</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Base</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                  <li >
+                    <a class="dropdown-item" href="../empty.html" >
+                      Empty page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blank.html" >
+                      Blank page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps.html" >
+                      Maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps-vector.html" >
+                      Vector maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../datatables.html" >
+                      Data Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../calendar.html" >
+                      Calendar
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../lists.html" >
+                      Lists
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../users.html" >
+                      Users
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../gallery.html" >
+                      Gallery
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../profile.html" >
+                      Profile
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../music.html" >
+                      Music
+                    </a>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Authentication
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../sign-in.html" class="dropdown-item">Sign in</a>
+                      <a href="../sign-up.html" class="dropdown-item">Sign up</a>
+                      <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
+                      <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
+                    </div>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Error pages
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../400.html" class="dropdown-item">400 page</a>
+                      <a href="../401.html" class="dropdown-item">401 page</a>
+                      <a href="../403.html" class="dropdown-item">403 page</a>
+                      <a href="../404.html" class="dropdown-item">404 page</a>
+                      <a href="../500.html" class="dropdown-item">500 page</a>
+                      <a href="../503.html" class="dropdown-item">503 page</a>
+                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  </span>
+                  <span class="nav-link-title">Extra</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow">
+                  <li >
+                    <a class="dropdown-item" href="../invoice.html" >
+                      Invoice
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blog.html" >
+                      Blog cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../snippets.html" >
+                      Snippets
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../search-results.html" >
+                      Search results
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../pricing.html" >
+                      Pricing cards
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Docs</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                  <li >
+                    <a class="dropdown-item" href="../docs/index.html" >
+                      Introduction
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/alerts.html" >
+                      Alerts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/autosize.html" >
+                      Autosize
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/avatars.html" >
+                      Avatars
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/badges.html" >
+                      Badges
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                      Breadcrumb
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/colors.html" >
+                      Colors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/countup.html" >
+                      Countup
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cursors.html" >
+                      Cursors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/dropdowns.html" >
+                      Dropdowns
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/divider.html" >
+                      Divider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/empty.html" >
+                      Empty states
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/flags.html" >
+                      Flags
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-elements.html" >
+                      Form elements
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-helpers.html" >
+                      Form helpers
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/input-mask.html" >
+                      Form input mask
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/progress.html" >
+                      Progress
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/payments.html" >
+                      Payments
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/range-slider.html" >
+                      Range slider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/ribbons.html" >
+                      Ribbons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/spinners.html" >
+                      Spinners
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/steps.html" >
+                      Steps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tables.html" >
+                      Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tabs.html" >
+                      Tabs
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/timelines.html" >
+                      Timelines
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/toasts.html" >
+                      Toasts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tooltips.html" >
+                      Tooltips
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/typography.html" >
+                      Typography
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item d-none-navbar-vertical">
+                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Customize</span>
+                </a>
+              </li>
+            </ul>
+            <h6 class="navbar-heading mt-4">Tools</h6>
+            <div class="navbar-side">
+              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                Customize
+              </a>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <form class="form-inline w-50 mr-4 d-none d-md-flex">
+            <div class="input-icon w-100">
+              <span class="input-icon-addon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              </span>
+              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
+            </div>
+          </form>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <span class="flag flag-country-us mr-1"></span>
+                <span class="d-none d-lg-inline">English</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
+                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
+                  German</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
+                  Polish</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
+                  Japan</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
+                  Russian</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item dropdown pl-2">
+              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <div class="d-none d-lg-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">Founder</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="content">
+        <div class="container">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action active">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Progress bar</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div class="flex-fill" style="max-width: 274px">
+                        <div>
+                          <div class="d-flex mb-1 align-items-center lh-1">
+                            <div class="text-h5 font-weight-bolder m-0">Label</div>
+                            <span class="ml-auto text-h6 strong">45%</span>
+                          </div>
+                          <div class="progress progress-sm">
+                            <div class="progress-bar bg-blue" style="width: 45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
+                              <span class="sr-only">45% Complete</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div>
+                          <div class="d-flex mb-1 align-items-center lh-1">
+                            <div class="text-h5 font-weight-bolder m-0">Label</div>
+                            <span class="ml-auto text-h6 strong">32%</span>
+                          </div>
+                          <div class="progress progress-sm">
+                            <div class="progress-bar bg-red" style="width: 32%" role="progressbar" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100">
+                              <span class="sr-only">32% Complete</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div>
+                          <div class="d-flex mb-1 align-items-center lh-1">
+                            <div class="text-h5 font-weight-bolder m-0">Label</div>
+                            <span class="ml-auto text-h6 strong">90%</span>
+                          </div>
+                          <div class="progress progress-sm">
+                            <div class="progress-bar bg-yellow" style="width: 90%" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
+                              <span class="sr-only">90% Complete</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div>
+                          <div class="d-flex mb-1 align-items-center lh-1">
+                            <div class="text-h5 font-weight-bolder m-0">Label</div>
+                            <span class="ml-auto text-h6 strong">51%</span>
+                          </div>
+                          <div class="progress progress-sm">
+                            <div class="progress-bar bg-green" style="width: 51%" role="progressbar" aria-valuenow="51" aria-valuemin="0" aria-valuemax="100">
+                              <span class="sr-only">51% Complete</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <div>
+                      <div class="d-flex mb-1 align-items-center lh-1">
+                        <div class="text-h5 font-weight-bolder m-0">Label</div>
+                        <span class="ml-auto text-h6 strong">45%</span>
+                      </div>
+                      <div class="progress progress-sm">
+                        <div class="progress-bar bg-blue" style="width: 45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
+                          <span class="sr-only">45% Complete</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="d-flex mb-1 align-items-center lh-1">
+                        <div class="text-h5 font-weight-bolder m-0">Label</div>
+                        <span class="ml-auto text-h6 strong">32%</span>
+                      </div>
+                      <div class="progress progress-sm">
+                        <div class="progress-bar bg-red" style="width: 32%" role="progressbar" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100">
+                          <span class="sr-only">32% Complete</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="d-flex mb-1 align-items-center lh-1">
+                        <div class="text-h5 font-weight-bolder m-0">Label</div>
+                        <span class="ml-auto text-h6 strong">90%</span>
+                      </div>
+                      <div class="progress progress-sm">
+                        <div class="progress-bar bg-yellow" style="width: 90%" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
+                          <span class="sr-only">90% Complete</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="d-flex mb-1 align-items-center lh-1">
+                        <div class="text-h5 font-weight-bolder m-0">Label</div>
+                        <span class="ml-auto text-h6 strong">51%</span>
+                      </div>
+                      <div class="progress progress-sm">
+                        <div class="progress-bar bg-green" style="width: 51%" role="progressbar" aria-valuenow="51" aria-valuemin="0" aria-valuemax="100">
+                          <span class="sr-only">51% Complete</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a></div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Progress bar","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n\n\n
+                        <div>\n   
+                          <div class=\"d-flex mb-1 align-items-center lh-1\">\n      
+                            <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
+                            \n      \n      <span class=\"ml-auto text-h6 strong\">45%</span>\n   </div>
+                          \n   \n\n
+                          <div class=\"progress progress-sm\">\n   \n      
+                            <div class=\"progress-bar bg-blue\" style=\"width: 45%\" role=\"progressbar\" aria-valuenow=\"45\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">45% Complete</span>\n         \n      </div>
+                            \n   \n</div>
+                          \n\n</div>
+                        \n\n\n\n\n
+                        <div>\n   
+                          <div class=\"d-flex mb-1 align-items-center lh-1\">\n      
+                            <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
+                            \n      \n      <span class=\"ml-auto text-h6 strong\">32%</span>\n   </div>
+                          \n   \n\n
+                          <div class=\"progress progress-sm\">\n   \n      
+                            <div class=\"progress-bar bg-red\" style=\"width: 32%\" role=\"progressbar\" aria-valuenow=\"32\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">32% Complete</span>\n         \n      </div>
+                            \n   \n</div>
+                          \n\n</div>
+                        \n\n\n\n\n
+                        <div>\n   
+                          <div class=\"d-flex mb-1 align-items-center lh-1\">\n      
+                            <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
+                            \n      \n      <span class=\"ml-auto text-h6 strong\">90%</span>\n   </div>
+                          \n   \n\n
+                          <div class=\"progress progress-sm\">\n   \n      
+                            <div class=\"progress-bar bg-yellow\" style=\"width: 90%\" role=\"progressbar\" aria-valuenow=\"90\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">90% Complete</span>\n         \n      </div>
+                            \n   \n</div>
+                          \n\n</div>
+                        \n\n\n\n\n
+                        <div>\n   
+                          <div class=\"d-flex mb-1 align-items-center lh-1\">\n      
+                            <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
+                            \n      \n      <span class=\"ml-auto text-h6 strong\">51%</span>\n   </div>
+                          \n   \n\n
+                          <div class=\"progress progress-sm\">\n   \n      
+                            <div class=\"progress-bar bg-green\" style=\"width: 51%\" role=\"progressbar\" aria-valuenow=\"51\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">51% Complete</span>\n         \n      </div>
+                            \n   \n</div>
+                          \n\n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-transparent">
+        <div class="container">
+          <div class="row text-center align-items-center flex-row-reverse">
+            <div class="col-lg-auto ml-lg-auto">
+              <ul class="list-inline list-inline-dots mb-0">
+                <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
+                <li class="list-inline-item"><a href="../faq.html" class="link-secondary">FAQ</a></li>
+                <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+              </ul>
+            </div>
+            <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+              Copyright © 2020
+              <a href=".." class="link-secondary">Tabler</a>.
+              All rights reserved.
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Customize Tabler</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
+          <div class="mb-3">
+            <label class="form-label">Color scheme</label>
+            <div class="form-hint">Light or dark presentation.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                Dark</button>
+            </div>
+          </div>
+          <div class="mb-4 text-muted">
+            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Navigation position</label>
+            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar size</label>
+            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar position</label>
+            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
+            </div>
+          </div>
+          <div>
+            <label class="form-label">Navigation color</label>
+            <div class="form-hint">Light or dark version of the sidebar </div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Libs JS -->
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1582373134"></script>
+  <script>
+    (function() {
+    	var navbarPrimary = document.getElementById('navbar-primary'),
+    		navbarSecondary = document.getElementById('navbar-secondary');
+    	var defaults = {
+    		theme: 'light',
+    		'navbar-position': 'horizontal',
+    		'navbar-size': 'wide',
+    		'navbar-side': 'left',
+    		'navbar-color': 'light',
+    	};
+    	var eventsClean = {
+    		'theme': function () {
+    			document.body.classList.remove('theme-dark');
+    		},
+    		'navbar-position': function () {
+    			navbarPrimary.classList.remove('navbar-vertical');
+    			navbarSecondary.classList.remove('d-none');
+    		},
+    		'navbar-size': function () {
+    			navbarPrimary.classList.remove('navbar-vertical-narrow');
+    		},
+    		'navbar-side': function () {
+    			navbarPrimary.classList.remove('navbar-right');
+    		},
+    		'navbar-color': function () {
+    			navbarPrimary.classList.remove('navbar-dark');
+    			navbarPrimary.classList.add('navbar-light');
+    		},
+    	};
+    	var events = {
+    		'theme:light': function () {
+    		},
+    		'theme:dark': function () {
+    			document.body.classList.add('theme-dark');
+    		},
+    		'navbar-position:vertical': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    			navbarSecondary.classList.add('d-none');
+    		},
+    		'navbar-position:horizontal': function () {
+    		},
+    		'navbar-position:both': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    		},
+    		'navbar-size:wide': function () {
+    		},
+    		'navbar-size:narrow': function () {
+    			navbarPrimary.classList.add('navbar-vertical-narrow');
+    		},
+    		'navbar-side:left': function () {
+    		},
+    		'navbar-side:right': function () {
+    			navbarPrimary.classList.add('navbar-right');
+    		},
+    		'navbar-color:light': function () {
+    		},
+    		'navbar-color:dark': function () {
+    			navbarPrimary.classList.add('navbar-dark');
+    			navbarPrimary.classList.remove('navbar-light');
+    		},
+    	};
+    	var updateThemeConfig = function (name) {
+    		var key, value;
+    		if (name) {
+    			[key, value] = name.split(':');
+    			setConfig(key, value);
+    		}
+    		applyConfig();
+    	};
+    	var disableTransitions = function () {
+    		document.body.classList.add('no-transitions');
+    		setTimeout(function () {
+    			document.body.classList.remove('no-transitions');
+    		}, 300);
+    	};
+    	var getConfig = function () {
+    		var config = {};
+    		for (var key in defaults) {
+    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
+    		}
+    		return config;
+    	};
+    	var setConfig = function (key, value) {
+    		localStorage.setItem('tabler-' + key, value);
+    	};
+    	var applyConfig = function () {
+    		disableTransitions();
+    		var config = getConfig();
+    		for (var key in config) {
+    			var value = config[key];
+    			eventsClean[key] && eventsClean[key].call();
+    			events[key + ':' + value] && events[key + ':' + value].call();
+    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
+    				activeTrigger.classList.remove('active')
+    			});
+    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
+    		}
+    	};
+    	applyConfig();
+    	for (var name in events) {
+    		var event = events[name];
+    		(function (event, name) {
+    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
+    				updateThemeConfig(name);
+    				event.call();
+    				e.preventDefault();
+    				return false;
+    			});
+    		})(event, name);
+    	}
+    })();
+  </script>
+  <script>
+    document.body.style.display = "block"
+  </script>
+</body>
+</html>

demo/components/simple-avatar.html

@@ -0,0 +1,801 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.4
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Simple avatar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/simple-avatar.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/simple-avatar.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/simple-avatar.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <div class="navbar-collapse collapse">
+            <h6 class="navbar-heading">Navigation</h6>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="../index.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Home</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="../form-elements.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  </span>
+                  <span class="nav-link-title">Form elements</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Base</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                  <li >
+                    <a class="dropdown-item" href="../empty.html" >
+                      Empty page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blank.html" >
+                      Blank page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps.html" >
+                      Maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps-vector.html" >
+                      Vector maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../datatables.html" >
+                      Data Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../calendar.html" >
+                      Calendar
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../lists.html" >
+                      Lists
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../users.html" >
+                      Users
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../gallery.html" >
+                      Gallery
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../profile.html" >
+                      Profile
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../music.html" >
+                      Music
+                    </a>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Authentication
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../sign-in.html" class="dropdown-item">Sign in</a>
+                      <a href="../sign-up.html" class="dropdown-item">Sign up</a>
+                      <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
+                      <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
+                    </div>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Error pages
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../400.html" class="dropdown-item">400 page</a>
+                      <a href="../401.html" class="dropdown-item">401 page</a>
+                      <a href="../403.html" class="dropdown-item">403 page</a>
+                      <a href="../404.html" class="dropdown-item">404 page</a>
+                      <a href="../500.html" class="dropdown-item">500 page</a>
+                      <a href="../503.html" class="dropdown-item">503 page</a>
+                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  </span>
+                  <span class="nav-link-title">Extra</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow">
+                  <li >
+                    <a class="dropdown-item" href="../invoice.html" >
+                      Invoice
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blog.html" >
+                      Blog cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../snippets.html" >
+                      Snippets
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../search-results.html" >
+                      Search results
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../pricing.html" >
+                      Pricing cards
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Docs</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                  <li >
+                    <a class="dropdown-item" href="../docs/index.html" >
+                      Introduction
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/alerts.html" >
+                      Alerts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/autosize.html" >
+                      Autosize
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/avatars.html" >
+                      Avatars
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/badges.html" >
+                      Badges
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                      Breadcrumb
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/colors.html" >
+                      Colors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/countup.html" >
+                      Countup
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cursors.html" >
+                      Cursors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/dropdowns.html" >
+                      Dropdowns
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/divider.html" >
+                      Divider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/empty.html" >
+                      Empty states
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/flags.html" >
+                      Flags
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-elements.html" >
+                      Form elements
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-helpers.html" >
+                      Form helpers
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/input-mask.html" >
+                      Form input mask
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/progress.html" >
+                      Progress
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/payments.html" >
+                      Payments
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/range-slider.html" >
+                      Range slider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/ribbons.html" >
+                      Ribbons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/spinners.html" >
+                      Spinners
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/steps.html" >
+                      Steps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tables.html" >
+                      Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tabs.html" >
+                      Tabs
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/timelines.html" >
+                      Timelines
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/toasts.html" >
+                      Toasts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tooltips.html" >
+                      Tooltips
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/typography.html" >
+                      Typography
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item d-none-navbar-vertical">
+                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Customize</span>
+                </a>
+              </li>
+            </ul>
+            <h6 class="navbar-heading mt-4">Tools</h6>
+            <div class="navbar-side">
+              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                Customize
+              </a>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <form class="form-inline w-50 mr-4 d-none d-md-flex">
+            <div class="input-icon w-100">
+              <span class="input-icon-addon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              </span>
+              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
+            </div>
+          </form>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <span class="flag flag-country-us mr-1"></span>
+                <span class="d-none d-lg-inline">English</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
+                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
+                  German</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
+                  Polish</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
+                  Japan</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
+                  Russian</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item dropdown pl-2">
+              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <div class="d-none d-lg-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">Founder</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="content">
+        <div class="container">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action active">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Simple avatar</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div >
+                        <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)">
+                          <span class="badge bg-green"></span></span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)">
+                      <span class="badge bg-green"></span></span>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a></div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Simple avatar","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  <span class=\"avatar\" style=\"background-image: url(../static/avatars/000m.jpg)\">\n\t<span class=\"badge bg-green\"></span></span>\n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-transparent">
+        <div class="container">
+          <div class="row text-center align-items-center flex-row-reverse">
+            <div class="col-lg-auto ml-lg-auto">
+              <ul class="list-inline list-inline-dots mb-0">
+                <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
+                <li class="list-inline-item"><a href="../faq.html" class="link-secondary">FAQ</a></li>
+                <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+              </ul>
+            </div>
+            <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+              Copyright © 2020
+              <a href=".." class="link-secondary">Tabler</a>.
+              All rights reserved.
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Customize Tabler</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
+          <div class="mb-3">
+            <label class="form-label">Color scheme</label>
+            <div class="form-hint">Light or dark presentation.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                Dark</button>
+            </div>
+          </div>
+          <div class="mb-4 text-muted">
+            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Navigation position</label>
+            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar size</label>
+            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar position</label>
+            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
+            </div>
+          </div>
+          <div>
+            <label class="form-label">Navigation color</label>
+            <div class="form-hint">Light or dark version of the sidebar </div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Libs JS -->
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1582373134"></script>
+  <script>
+    (function() {
+    	var navbarPrimary = document.getElementById('navbar-primary'),
+    		navbarSecondary = document.getElementById('navbar-secondary');
+    	var defaults = {
+    		theme: 'light',
+    		'navbar-position': 'horizontal',
+    		'navbar-size': 'wide',
+    		'navbar-side': 'left',
+    		'navbar-color': 'light',
+    	};
+    	var eventsClean = {
+    		'theme': function () {
+    			document.body.classList.remove('theme-dark');
+    		},
+    		'navbar-position': function () {
+    			navbarPrimary.classList.remove('navbar-vertical');
+    			navbarSecondary.classList.remove('d-none');
+    		},
+    		'navbar-size': function () {
+    			navbarPrimary.classList.remove('navbar-vertical-narrow');
+    		},
+    		'navbar-side': function () {
+    			navbarPrimary.classList.remove('navbar-right');
+    		},
+    		'navbar-color': function () {
+    			navbarPrimary.classList.remove('navbar-dark');
+    			navbarPrimary.classList.add('navbar-light');
+    		},
+    	};
+    	var events = {
+    		'theme:light': function () {
+    		},
+    		'theme:dark': function () {
+    			document.body.classList.add('theme-dark');
+    		},
+    		'navbar-position:vertical': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    			navbarSecondary.classList.add('d-none');
+    		},
+    		'navbar-position:horizontal': function () {
+    		},
+    		'navbar-position:both': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    		},
+    		'navbar-size:wide': function () {
+    		},
+    		'navbar-size:narrow': function () {
+    			navbarPrimary.classList.add('navbar-vertical-narrow');
+    		},
+    		'navbar-side:left': function () {
+    		},
+    		'navbar-side:right': function () {
+    			navbarPrimary.classList.add('navbar-right');
+    		},
+    		'navbar-color:light': function () {
+    		},
+    		'navbar-color:dark': function () {
+    			navbarPrimary.classList.add('navbar-dark');
+    			navbarPrimary.classList.remove('navbar-light');
+    		},
+    	};
+    	var updateThemeConfig = function (name) {
+    		var key, value;
+    		if (name) {
+    			[key, value] = name.split(':');
+    			setConfig(key, value);
+    		}
+    		applyConfig();
+    	};
+    	var disableTransitions = function () {
+    		document.body.classList.add('no-transitions');
+    		setTimeout(function () {
+    			document.body.classList.remove('no-transitions');
+    		}, 300);
+    	};
+    	var getConfig = function () {
+    		var config = {};
+    		for (var key in defaults) {
+    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
+    		}
+    		return config;
+    	};
+    	var setConfig = function (key, value) {
+    		localStorage.setItem('tabler-' + key, value);
+    	};
+    	var applyConfig = function () {
+    		disableTransitions();
+    		var config = getConfig();
+    		for (var key in config) {
+    			var value = config[key];
+    			eventsClean[key] && eventsClean[key].call();
+    			events[key + ':' + value] && events[key + ':' + value].call();
+    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
+    				activeTrigger.classList.remove('active')
+    			});
+    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
+    		}
+    	};
+    	applyConfig();
+    	for (var name in events) {
+    		var event = events[name];
+    		(function (event, name) {
+    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
+    				updateThemeConfig(name);
+    				event.call();
+    				e.preventDefault();
+    				return false;
+    			});
+    		})(event, name);
+    	}
+    })();
+  </script>
+  <script>
+    document.body.style.display = "block"
+  </script>
+</body>
+</html>

demo/components/simple-card.html

@@ -0,0 +1,815 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.4
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Simple box - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/simple-card.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/simple-card.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/simple-card.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <div class="navbar-collapse collapse">
+            <h6 class="navbar-heading">Navigation</h6>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="../index.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Home</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="../form-elements.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  </span>
+                  <span class="nav-link-title">Form elements</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Base</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                  <li >
+                    <a class="dropdown-item" href="../empty.html" >
+                      Empty page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blank.html" >
+                      Blank page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps.html" >
+                      Maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps-vector.html" >
+                      Vector maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../datatables.html" >
+                      Data Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../calendar.html" >
+                      Calendar
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../lists.html" >
+                      Lists
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../users.html" >
+                      Users
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../gallery.html" >
+                      Gallery
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../profile.html" >
+                      Profile
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../music.html" >
+                      Music
+                    </a>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Authentication
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../sign-in.html" class="dropdown-item">Sign in</a>
+                      <a href="../sign-up.html" class="dropdown-item">Sign up</a>
+                      <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
+                      <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
+                    </div>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Error pages
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../400.html" class="dropdown-item">400 page</a>
+                      <a href="../401.html" class="dropdown-item">401 page</a>
+                      <a href="../403.html" class="dropdown-item">403 page</a>
+                      <a href="../404.html" class="dropdown-item">404 page</a>
+                      <a href="../500.html" class="dropdown-item">500 page</a>
+                      <a href="../503.html" class="dropdown-item">503 page</a>
+                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  </span>
+                  <span class="nav-link-title">Extra</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow">
+                  <li >
+                    <a class="dropdown-item" href="../invoice.html" >
+                      Invoice
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blog.html" >
+                      Blog cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../snippets.html" >
+                      Snippets
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../search-results.html" >
+                      Search results
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../pricing.html" >
+                      Pricing cards
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Docs</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                  <li >
+                    <a class="dropdown-item" href="../docs/index.html" >
+                      Introduction
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/alerts.html" >
+                      Alerts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/autosize.html" >
+                      Autosize
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/avatars.html" >
+                      Avatars
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/badges.html" >
+                      Badges
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                      Breadcrumb
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/colors.html" >
+                      Colors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/countup.html" >
+                      Countup
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cursors.html" >
+                      Cursors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/dropdowns.html" >
+                      Dropdowns
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/divider.html" >
+                      Divider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/empty.html" >
+                      Empty states
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/flags.html" >
+                      Flags
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-elements.html" >
+                      Form elements
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-helpers.html" >
+                      Form helpers
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/input-mask.html" >
+                      Form input mask
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/progress.html" >
+                      Progress
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/payments.html" >
+                      Payments
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/range-slider.html" >
+                      Range slider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/ribbons.html" >
+                      Ribbons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/spinners.html" >
+                      Spinners
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/steps.html" >
+                      Steps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tables.html" >
+                      Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tabs.html" >
+                      Tabs
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/timelines.html" >
+                      Timelines
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/toasts.html" >
+                      Toasts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tooltips.html" >
+                      Tooltips
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/typography.html" >
+                      Typography
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item d-none-navbar-vertical">
+                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Customize</span>
+                </a>
+              </li>
+            </ul>
+            <h6 class="navbar-heading mt-4">Tools</h6>
+            <div class="navbar-side">
+              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                Customize
+              </a>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <form class="form-inline w-50 mr-4 d-none d-md-flex">
+            <div class="input-icon w-100">
+              <span class="input-icon-addon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              </span>
+              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
+            </div>
+          </form>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <span class="flag flag-country-us mr-1"></span>
+                <span class="d-none d-lg-inline">English</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
+                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
+                  German</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
+                  Polish</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
+                  Japan</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
+                  Russian</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item dropdown pl-2">
+              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <div class="d-none d-lg-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">Founder</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="content">
+        <div class="container">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action active">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Simple box</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div class="flex-fill" style="max-width: 274px">
+                        <div class="card">
+                          <div class="card-body">
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                              neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <div class="card">
+                      <div class="card-body">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                          neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a></div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Simple box","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
+                        <div class=\"card\">\n      
+                          <div class=\"card-body\">\n         
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima\n            neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                            \n      </div>
+                          \n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-transparent">
+        <div class="container">
+          <div class="row text-center align-items-center flex-row-reverse">
+            <div class="col-lg-auto ml-lg-auto">
+              <ul class="list-inline list-inline-dots mb-0">
+                <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
+                <li class="list-inline-item"><a href="../faq.html" class="link-secondary">FAQ</a></li>
+                <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+              </ul>
+            </div>
+            <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+              Copyright © 2020
+              <a href=".." class="link-secondary">Tabler</a>.
+              All rights reserved.
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Customize Tabler</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
+          <div class="mb-3">
+            <label class="form-label">Color scheme</label>
+            <div class="form-hint">Light or dark presentation.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                Dark</button>
+            </div>
+          </div>
+          <div class="mb-4 text-muted">
+            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Navigation position</label>
+            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar size</label>
+            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar position</label>
+            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
+            </div>
+          </div>
+          <div>
+            <label class="form-label">Navigation color</label>
+            <div class="form-hint">Light or dark version of the sidebar </div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Libs JS -->
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1582373134"></script>
+  <script>
+    (function() {
+    	var navbarPrimary = document.getElementById('navbar-primary'),
+    		navbarSecondary = document.getElementById('navbar-secondary');
+    	var defaults = {
+    		theme: 'light',
+    		'navbar-position': 'horizontal',
+    		'navbar-size': 'wide',
+    		'navbar-side': 'left',
+    		'navbar-color': 'light',
+    	};
+    	var eventsClean = {
+    		'theme': function () {
+    			document.body.classList.remove('theme-dark');
+    		},
+    		'navbar-position': function () {
+    			navbarPrimary.classList.remove('navbar-vertical');
+    			navbarSecondary.classList.remove('d-none');
+    		},
+    		'navbar-size': function () {
+    			navbarPrimary.classList.remove('navbar-vertical-narrow');
+    		},
+    		'navbar-side': function () {
+    			navbarPrimary.classList.remove('navbar-right');
+    		},
+    		'navbar-color': function () {
+    			navbarPrimary.classList.remove('navbar-dark');
+    			navbarPrimary.classList.add('navbar-light');
+    		},
+    	};
+    	var events = {
+    		'theme:light': function () {
+    		},
+    		'theme:dark': function () {
+    			document.body.classList.add('theme-dark');
+    		},
+    		'navbar-position:vertical': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    			navbarSecondary.classList.add('d-none');
+    		},
+    		'navbar-position:horizontal': function () {
+    		},
+    		'navbar-position:both': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    		},
+    		'navbar-size:wide': function () {
+    		},
+    		'navbar-size:narrow': function () {
+    			navbarPrimary.classList.add('navbar-vertical-narrow');
+    		},
+    		'navbar-side:left': function () {
+    		},
+    		'navbar-side:right': function () {
+    			navbarPrimary.classList.add('navbar-right');
+    		},
+    		'navbar-color:light': function () {
+    		},
+    		'navbar-color:dark': function () {
+    			navbarPrimary.classList.add('navbar-dark');
+    			navbarPrimary.classList.remove('navbar-light');
+    		},
+    	};
+    	var updateThemeConfig = function (name) {
+    		var key, value;
+    		if (name) {
+    			[key, value] = name.split(':');
+    			setConfig(key, value);
+    		}
+    		applyConfig();
+    	};
+    	var disableTransitions = function () {
+    		document.body.classList.add('no-transitions');
+    		setTimeout(function () {
+    			document.body.classList.remove('no-transitions');
+    		}, 300);
+    	};
+    	var getConfig = function () {
+    		var config = {};
+    		for (var key in defaults) {
+    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
+    		}
+    		return config;
+    	};
+    	var setConfig = function (key, value) {
+    		localStorage.setItem('tabler-' + key, value);
+    	};
+    	var applyConfig = function () {
+    		disableTransitions();
+    		var config = getConfig();
+    		for (var key in config) {
+    			var value = config[key];
+    			eventsClean[key] && eventsClean[key].call();
+    			events[key + ':' + value] && events[key + ':' + value].call();
+    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
+    				activeTrigger.classList.remove('active')
+    			});
+    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
+    		}
+    	};
+    	applyConfig();
+    	for (var name in events) {
+    		var event = events[name];
+    		(function (event, name) {
+    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
+    				updateThemeConfig(name);
+    				event.call();
+    				e.preventDefault();
+    				return false;
+    			});
+    		})(event, name);
+    	}
+    })();
+  </script>
+  <script>
+    document.body.style.display = "block"
+  </script>
+</body>
+</html>

demo/components/widget-revenue.html

@@ -0,0 +1,875 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.4
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Revenue chart - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/widget-revenue.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/widget-revenue.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/widget-revenue.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <div class="navbar-collapse collapse">
+            <h6 class="navbar-heading">Navigation</h6>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="../index.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Home</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="../form-elements.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  </span>
+                  <span class="nav-link-title">Form elements</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Base</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                  <li >
+                    <a class="dropdown-item" href="../empty.html" >
+                      Empty page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blank.html" >
+                      Blank page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps.html" >
+                      Maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps-vector.html" >
+                      Vector maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../datatables.html" >
+                      Data Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../calendar.html" >
+                      Calendar
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../lists.html" >
+                      Lists
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../users.html" >
+                      Users
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../gallery.html" >
+                      Gallery
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../profile.html" >
+                      Profile
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../music.html" >
+                      Music
+                    </a>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Authentication
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../sign-in.html" class="dropdown-item">Sign in</a>
+                      <a href="../sign-up.html" class="dropdown-item">Sign up</a>
+                      <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
+                      <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
+                    </div>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Error pages
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../400.html" class="dropdown-item">400 page</a>
+                      <a href="../401.html" class="dropdown-item">401 page</a>
+                      <a href="../403.html" class="dropdown-item">403 page</a>
+                      <a href="../404.html" class="dropdown-item">404 page</a>
+                      <a href="../500.html" class="dropdown-item">500 page</a>
+                      <a href="../503.html" class="dropdown-item">503 page</a>
+                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  </span>
+                  <span class="nav-link-title">Extra</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow">
+                  <li >
+                    <a class="dropdown-item" href="../invoice.html" >
+                      Invoice
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blog.html" >
+                      Blog cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../snippets.html" >
+                      Snippets
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../search-results.html" >
+                      Search results
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../pricing.html" >
+                      Pricing cards
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Docs</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                  <li >
+                    <a class="dropdown-item" href="../docs/index.html" >
+                      Introduction
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/alerts.html" >
+                      Alerts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/autosize.html" >
+                      Autosize
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/avatars.html" >
+                      Avatars
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/badges.html" >
+                      Badges
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                      Breadcrumb
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/colors.html" >
+                      Colors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/countup.html" >
+                      Countup
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cursors.html" >
+                      Cursors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/dropdowns.html" >
+                      Dropdowns
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/divider.html" >
+                      Divider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/empty.html" >
+                      Empty states
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/flags.html" >
+                      Flags
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-elements.html" >
+                      Form elements
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-helpers.html" >
+                      Form helpers
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/input-mask.html" >
+                      Form input mask
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/progress.html" >
+                      Progress
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/payments.html" >
+                      Payments
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/range-slider.html" >
+                      Range slider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/ribbons.html" >
+                      Ribbons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/spinners.html" >
+                      Spinners
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/steps.html" >
+                      Steps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tables.html" >
+                      Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tabs.html" >
+                      Tabs
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/timelines.html" >
+                      Timelines
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/toasts.html" >
+                      Toasts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tooltips.html" >
+                      Tooltips
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/typography.html" >
+                      Typography
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item d-none-navbar-vertical">
+                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Customize</span>
+                </a>
+              </li>
+            </ul>
+            <h6 class="navbar-heading mt-4">Tools</h6>
+            <div class="navbar-side">
+              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                Customize
+              </a>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <form class="form-inline w-50 mr-4 d-none d-md-flex">
+            <div class="input-icon w-100">
+              <span class="input-icon-addon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              </span>
+              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
+            </div>
+          </form>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <span class="flag flag-country-us mr-1"></span>
+                <span class="d-none d-lg-inline">English</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
+                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
+                  German</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
+                  Polish</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
+                  Japan</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
+                  Russian</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item dropdown pl-2">
+              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <div class="d-none d-lg-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">Founder</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="content">
+        <div class="container">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action active">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Revenue chart</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div >
+                        <div class="card">
+                          <div class="card-body">
+                            <div class="d-flex align-items-center">
+                              <div class="subheader">Revenue</div>
+                              <div class="ml-auto lh-1">
+                                <div class="dropdown">
+                                  <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    Last 7 days
+                                  </a>
+                                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                                    <a class="dropdown-item active" href="#">Last 7 days</a>
+                                    <a class="dropdown-item" href="#">Last 30 days</a>
+                                    <a class="dropdown-item" href="#">Last 3 months</a>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div class="d-flex align-items-baseline">
+                              <div class="h1 mb-0 mr-2">$4,300</div>
+                              <div class="mr-auto">
+                                <span class="text-green d-inline-flex align-items-center lh-1">
+                                  8% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                          <div id="chart-revenue-bg"  class="chart-sm" ></div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <div class="card">
+                      <div class="card-body">
+                        <div class="d-flex align-items-center">
+                          <div class="subheader">Revenue</div>
+                          <div class="ml-auto lh-1">
+                            <div class="dropdown">
+                              <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                Last 7 days
+                              </a>
+                              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                                <a class="dropdown-item active" href="#">Last 7 days</a>
+                                <a class="dropdown-item" href="#">Last 30 days</a>
+                                <a class="dropdown-item" href="#">Last 3 months</a>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="d-flex align-items-baseline">
+                          <div class="h1 mb-0 mr-2">$4,300</div>
+                          <div class="mr-auto">
+                            <span class="text-green d-inline-flex align-items-center lh-1">
+                              8% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <div id="chart-revenue-bg"  class="chart-sm" ></div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a></div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Revenue chart","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
+                        <div class=\"card\">\n   
+                          <div class=\"card-body\">\n      
+                            <div class=\"d-flex align-items-center\">\n         
+                              <div class=\"subheader\">Revenue</div>
+                              \n         
+                              <div class=\"ml-auto lh-1\">\n            
+                                <div class=\"dropdown\">\n   <a class=\"dropdown-toggle text-muted\" href=\"#\" id=\"dropdownMenuButton\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n      Last 7 days\n   </a>\n   
+                                  <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"dropdownMenuButton\">\n      <a class=\"dropdown-item active\" href=\"#\">Last 7 days</a>\n      <a class=\"dropdown-item\" href=\"#\">Last 30 days</a>\n      <a class=\"dropdown-item\" href=\"#\">Last 3 months</a>\n   </div>
+                                  \n</div>
+                                \n\n         </div>
+                              \n      </div>
+                            \n      
+                            <div class=\"d-flex align-items-baseline\">\n         
+                              <div class=\"h1 mb-0 mr-2\">$4,300</div>
+                              \n         
+                              <div class=\"mr-auto\">\n            \n\n\n<span class=\"text-green d-inline-flex align-items-center lh-1\">\n   8% <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon ml-1\"><polyline points=\"23 6 13.5 15.5 8.5 10.5 1 18\"></polyline><polyline points=\"17 6 23 6 23 12\"></polyline></svg>\n\n</span>\n\n         </div>
+                              \n      </div>
+                            \n   </div>
+                          \n   \n\n\n\n\n\n\n\n\n\n
+                          <div id=\"chart-revenue-bg\"  class=\"chart-sm\" ></div>
+                          \n\n\n\n\n\n\n\n\n\n\n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-transparent">
+        <div class="container">
+          <div class="row text-center align-items-center flex-row-reverse">
+            <div class="col-lg-auto ml-lg-auto">
+              <ul class="list-inline list-inline-dots mb-0">
+                <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
+                <li class="list-inline-item"><a href="../faq.html" class="link-secondary">FAQ</a></li>
+                <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+              </ul>
+            </div>
+            <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+              Copyright © 2020
+              <a href=".." class="link-secondary">Tabler</a>.
+              All rights reserved.
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Customize Tabler</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
+          <div class="mb-3">
+            <label class="form-label">Color scheme</label>
+            <div class="form-hint">Light or dark presentation.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                Dark</button>
+            </div>
+          </div>
+          <div class="mb-4 text-muted">
+            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Navigation position</label>
+            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar size</label>
+            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar position</label>
+            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
+            </div>
+          </div>
+          <div>
+            <label class="form-label">Navigation color</label>
+            <div class="form-hint">Light or dark version of the sidebar </div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Libs JS -->
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1582373134"></script>
+  <script>
+    (function() {
+    	var navbarPrimary = document.getElementById('navbar-primary'),
+    		navbarSecondary = document.getElementById('navbar-secondary');
+    	var defaults = {
+    		theme: 'light',
+    		'navbar-position': 'horizontal',
+    		'navbar-size': 'wide',
+    		'navbar-side': 'left',
+    		'navbar-color': 'light',
+    	};
+    	var eventsClean = {
+    		'theme': function () {
+    			document.body.classList.remove('theme-dark');
+    		},
+    		'navbar-position': function () {
+    			navbarPrimary.classList.remove('navbar-vertical');
+    			navbarSecondary.classList.remove('d-none');
+    		},
+    		'navbar-size': function () {
+    			navbarPrimary.classList.remove('navbar-vertical-narrow');
+    		},
+    		'navbar-side': function () {
+    			navbarPrimary.classList.remove('navbar-right');
+    		},
+    		'navbar-color': function () {
+    			navbarPrimary.classList.remove('navbar-dark');
+    			navbarPrimary.classList.add('navbar-light');
+    		},
+    	};
+    	var events = {
+    		'theme:light': function () {
+    		},
+    		'theme:dark': function () {
+    			document.body.classList.add('theme-dark');
+    		},
+    		'navbar-position:vertical': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    			navbarSecondary.classList.add('d-none');
+    		},
+    		'navbar-position:horizontal': function () {
+    		},
+    		'navbar-position:both': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    		},
+    		'navbar-size:wide': function () {
+    		},
+    		'navbar-size:narrow': function () {
+    			navbarPrimary.classList.add('navbar-vertical-narrow');
+    		},
+    		'navbar-side:left': function () {
+    		},
+    		'navbar-side:right': function () {
+    			navbarPrimary.classList.add('navbar-right');
+    		},
+    		'navbar-color:light': function () {
+    		},
+    		'navbar-color:dark': function () {
+    			navbarPrimary.classList.add('navbar-dark');
+    			navbarPrimary.classList.remove('navbar-light');
+    		},
+    	};
+    	var updateThemeConfig = function (name) {
+    		var key, value;
+    		if (name) {
+    			[key, value] = name.split(':');
+    			setConfig(key, value);
+    		}
+    		applyConfig();
+    	};
+    	var disableTransitions = function () {
+    		document.body.classList.add('no-transitions');
+    		setTimeout(function () {
+    			document.body.classList.remove('no-transitions');
+    		}, 300);
+    	};
+    	var getConfig = function () {
+    		var config = {};
+    		for (var key in defaults) {
+    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
+    		}
+    		return config;
+    	};
+    	var setConfig = function (key, value) {
+    		localStorage.setItem('tabler-' + key, value);
+    	};
+    	var applyConfig = function () {
+    		disableTransitions();
+    		var config = getConfig();
+    		for (var key in config) {
+    			var value = config[key];
+    			eventsClean[key] && eventsClean[key].call();
+    			events[key + ':' + value] && events[key + ':' + value].call();
+    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
+    				activeTrigger.classList.remove('active')
+    			});
+    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
+    		}
+    	};
+    	applyConfig();
+    	for (var name in events) {
+    		var event = events[name];
+    		(function (event, name) {
+    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
+    				updateThemeConfig(name);
+    				event.call();
+    				e.preventDefault();
+    				return false;
+    			});
+    		})(event, name);
+    	}
+    })();
+  </script>
+  <script>
+    document.body.style.display = "block"
+  </script>
+</body>
+</html>

demo/components/widget-sales.html

@@ -0,0 +1,889 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.4
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Sales widget - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/widget-sales.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/widget-sales.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/widget-sales.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
+    <link href="../dist/css/demo.min.css?1582373134" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <div class="navbar-collapse collapse">
+            <h6 class="navbar-heading">Navigation</h6>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="../index.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Home</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="../form-elements.html" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  </span>
+                  <span class="nav-link-title">Form elements</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Base</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                  <li >
+                    <a class="dropdown-item" href="../empty.html" >
+                      Empty page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blank.html" >
+                      Blank page
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps.html" >
+                      Maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../maps-vector.html" >
+                      Vector maps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../datatables.html" >
+                      Data Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../calendar.html" >
+                      Calendar
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../lists.html" >
+                      Lists
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../users.html" >
+                      Users
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../gallery.html" >
+                      Gallery
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../profile.html" >
+                      Profile
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../music.html" >
+                      Music
+                    </a>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Authentication
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../sign-in.html" class="dropdown-item">Sign in</a>
+                      <a href="../sign-up.html" class="dropdown-item">Sign up</a>
+                      <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
+                      <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
+                    </div>
+                  </li>
+                  <li class="dropright">
+                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                      Error pages
+                    </a>
+                    <div class="dropdown-menu">
+                      <a href="../400.html" class="dropdown-item">400 page</a>
+                      <a href="../401.html" class="dropdown-item">401 page</a>
+                      <a href="../403.html" class="dropdown-item">403 page</a>
+                      <a href="../404.html" class="dropdown-item">404 page</a>
+                      <a href="../500.html" class="dropdown-item">500 page</a>
+                      <a href="../503.html" class="dropdown-item">503 page</a>
+                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  </span>
+                  <span class="nav-link-title">Extra</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow">
+                  <li >
+                    <a class="dropdown-item" href="../invoice.html" >
+                      Invoice
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../blog.html" >
+                      Blog cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../snippets.html" >
+                      Snippets
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../search-results.html" >
+                      Search results
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../pricing.html" >
+                      Pricing cards
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			   aria-expanded="false" >
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  </span>
+                  <span class="nav-link-title">Docs</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                  <li >
+                    <a class="dropdown-item" href="../docs/index.html" >
+                      Introduction
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/alerts.html" >
+                      Alerts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/autosize.html" >
+                      Autosize
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/avatars.html" >
+                      Avatars
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/badges.html" >
+                      Badges
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                      Breadcrumb
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/buttons.html" >
+                      Buttons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cards.html" >
+                      Cards
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/carousel.html" >
+                      Carousel
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/colors.html" >
+                      Colors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/countup.html" >
+                      Countup
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/cursors.html" >
+                      Cursors
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/charts.html" >
+                      Charts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/dropdowns.html" >
+                      Dropdowns
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/divider.html" >
+                      Divider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/empty.html" >
+                      Empty states
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/flags.html" >
+                      Flags
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-elements.html" >
+                      Form elements
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/form-helpers.html" >
+                      Form helpers
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/input-mask.html" >
+                      Form input mask
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/modals.html" >
+                      Modals
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/progress.html" >
+                      Progress
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/payments.html" >
+                      Payments
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/range-slider.html" >
+                      Range slider
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/ribbons.html" >
+                      Ribbons
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/spinners.html" >
+                      Spinners
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/steps.html" >
+                      Steps
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tables.html" >
+                      Tables
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tabs.html" >
+                      Tabs
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/timelines.html" >
+                      Timelines
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/toasts.html" >
+                      Toasts
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/tooltips.html" >
+                      Tooltips
+                    </a>
+                  </li>
+                  <li >
+                    <a class="dropdown-item" href="../docs/typography.html" >
+                      Typography
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item d-none-navbar-vertical">
+                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
+                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  </span>
+                  <span class="nav-link-title">Customize</span>
+                </a>
+              </li>
+            </ul>
+            <h6 class="navbar-heading mt-4">Tools</h6>
+            <div class="navbar-side">
+              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                Customize
+              </a>
+              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
+        <div class="container">
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
+            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
+            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+          </a>
+          <form class="form-inline w-50 mr-4 d-none d-md-flex">
+            <div class="input-icon w-100">
+              <span class="input-icon-addon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              </span>
+              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
+            </div>
+          </form>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <span class="flag flag-country-us mr-1"></span>
+                <span class="d-none d-lg-inline">English</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
+                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
+                  German</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
+                  Polish</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
+                  Japan</a>
+                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
+                  Russian</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item dropdown pl-2">
+              <a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
+                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <div class="d-none d-lg-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">Founder</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Action
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  Another action
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  Separated link</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="content">
+        <div class="container">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action active">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Sales widget</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div class="flex-fill" style="max-width: 274px">
+                        <div class="card">
+                          <div class="card-body">
+                            <div class="d-flex align-items-center">
+                              <div class="subheader">Sales</div>
+                              <div class="ml-auto lh-1">
+                                <div class="dropdown">
+                                  <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    Last 7 days
+                                  </a>
+                                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                                    <a class="dropdown-item active" href="#">Last 7 days</a>
+                                    <a class="dropdown-item" href="#">Last 30 days</a>
+                                    <a class="dropdown-item" href="#">Last 3 months</a>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div class="h1 mb-3">75%</div>
+                            <div class="d-flex mb-2">
+                              <div>Conversion rate</div>
+                              <div class="ml-auto">
+                                <span class="text-green d-inline-flex align-items-center lh-1">
+                                  7% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
+                                </span>
+                              </div>
+                            </div>
+                            <div class="progress progress-sm">
+                              <div class="progress-bar bg-blue" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+                                <span class="sr-only">75% Complete</span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <div class="card">
+                      <div class="card-body">
+                        <div class="d-flex align-items-center">
+                          <div class="subheader">Sales</div>
+                          <div class="ml-auto lh-1">
+                            <div class="dropdown">
+                              <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                Last 7 days
+                              </a>
+                              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                                <a class="dropdown-item active" href="#">Last 7 days</a>
+                                <a class="dropdown-item" href="#">Last 30 days</a>
+                                <a class="dropdown-item" href="#">Last 3 months</a>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="h1 mb-3">75%</div>
+                        <div class="d-flex mb-2">
+                          <div>Conversion rate</div>
+                          <div class="ml-auto">
+                            <span class="text-green d-inline-flex align-items-center lh-1">
+                              7% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
+                            </span>
+                          </div>
+                        </div>
+                        <div class="progress progress-sm">
+                          <div class="progress-bar bg-blue" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+                            <span class="sr-only">75% Complete</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a></div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Sales widget","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
+                        <div class=\"card\">\n   
+                          <div class=\"card-body\">\n      
+                            <div class=\"d-flex align-items-center\">\n         
+                              <div class=\"subheader\">Sales</div>
+                              \n         
+                              <div class=\"ml-auto lh-1\">\n            
+                                <div class=\"dropdown\">\n   <a class=\"dropdown-toggle text-muted\" href=\"#\" id=\"dropdownMenuButton\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n      Last 7 days\n   </a>\n   
+                                  <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"dropdownMenuButton\">\n      <a class=\"dropdown-item active\" href=\"#\">Last 7 days</a>\n      <a class=\"dropdown-item\" href=\"#\">Last 30 days</a>\n      <a class=\"dropdown-item\" href=\"#\">Last 3 months</a>\n   </div>
+                                  \n</div>
+                                \n\n         </div>
+                              \n      </div>
+                            \n      
+                            <div class=\"h1 mb-3\">75%</div>
+                            \n      
+                            <div class=\"d-flex mb-2\">\n         
+                              <div>Conversion rate</div>
+                              \n         
+                              <div class=\"ml-auto\">\n\n\n<span class=\"text-green d-inline-flex align-items-center lh-1\">\n   7% <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon ml-1\"><polyline points=\"23 6 13.5 15.5 8.5 10.5 1 18\"></polyline><polyline points=\"17 6 23 6 23 12\"></polyline></svg>\n\n</span>\n</div>
+                              \n      </div>
+                            \n      \n\n
+                            <div class=\"progress progress-sm\">\n   \n      
+                              <div class=\"progress-bar bg-blue\" style=\"width: 75%\" role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">75% Complete</span>\n         \n      </div>
+                              \n   \n</div>
+                            \n\n   </div>
+                          \n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-transparent">
+        <div class="container">
+          <div class="row text-center align-items-center flex-row-reverse">
+            <div class="col-lg-auto ml-lg-auto">
+              <ul class="list-inline list-inline-dots mb-0">
+                <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
+                <li class="list-inline-item"><a href="../faq.html" class="link-secondary">FAQ</a></li>
+                <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+              </ul>
+            </div>
+            <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+              Copyright © 2020
+              <a href=".." class="link-secondary">Tabler</a>.
+              All rights reserved.
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Customize Tabler</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p class="text-muted">Set preferences that will be saved for your live preview.</p>
+          <div class="mb-3">
+            <label class="form-label">Color scheme</label>
+            <div class="form-hint">Light or dark presentation.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                Dark</button>
+            </div>
+          </div>
+          <div class="mb-4 text-muted">
+            You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Navigation position</label>
+            <div class="form-hint">Choose where the main navigation in your project should be located.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar size</label>
+            <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Sidebar position</label>
+            <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
+            </div>
+          </div>
+          <div>
+            <label class="form-label">Navigation color</label>
+            <div class="form-hint">Light or dark version of the sidebar </div>
+            <div class="btn-group w-100">
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
+              <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Libs JS -->
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1582373134"></script>
+  <script>
+    (function() {
+    	var navbarPrimary = document.getElementById('navbar-primary'),
+    		navbarSecondary = document.getElementById('navbar-secondary');
+    	var defaults = {
+    		theme: 'light',
+    		'navbar-position': 'horizontal',
+    		'navbar-size': 'wide',
+    		'navbar-side': 'left',
+    		'navbar-color': 'light',
+    	};
+    	var eventsClean = {
+    		'theme': function () {
+    			document.body.classList.remove('theme-dark');
+    		},
+    		'navbar-position': function () {
+    			navbarPrimary.classList.remove('navbar-vertical');
+    			navbarSecondary.classList.remove('d-none');
+    		},
+    		'navbar-size': function () {
+    			navbarPrimary.classList.remove('navbar-vertical-narrow');
+    		},
+    		'navbar-side': function () {
+    			navbarPrimary.classList.remove('navbar-right');
+    		},
+    		'navbar-color': function () {
+    			navbarPrimary.classList.remove('navbar-dark');
+    			navbarPrimary.classList.add('navbar-light');
+    		},
+    	};
+    	var events = {
+    		'theme:light': function () {
+    		},
+    		'theme:dark': function () {
+    			document.body.classList.add('theme-dark');
+    		},
+    		'navbar-position:vertical': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    			navbarSecondary.classList.add('d-none');
+    		},
+    		'navbar-position:horizontal': function () {
+    		},
+    		'navbar-position:both': function () {
+    			navbarPrimary.classList.add('navbar-vertical');
+    		},
+    		'navbar-size:wide': function () {
+    		},
+    		'navbar-size:narrow': function () {
+    			navbarPrimary.classList.add('navbar-vertical-narrow');
+    		},
+    		'navbar-side:left': function () {
+    		},
+    		'navbar-side:right': function () {
+    			navbarPrimary.classList.add('navbar-right');
+    		},
+    		'navbar-color:light': function () {
+    		},
+    		'navbar-color:dark': function () {
+    			navbarPrimary.classList.add('navbar-dark');
+    			navbarPrimary.classList.remove('navbar-light');
+    		},
+    	};
+    	var updateThemeConfig = function (name) {
+    		var key, value;
+    		if (name) {
+    			[key, value] = name.split(':');
+    			setConfig(key, value);
+    		}
+    		applyConfig();
+    	};
+    	var disableTransitions = function () {
+    		document.body.classList.add('no-transitions');
+    		setTimeout(function () {
+    			document.body.classList.remove('no-transitions');
+    		}, 300);
+    	};
+    	var getConfig = function () {
+    		var config = {};
+    		for (var key in defaults) {
+    			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
+    		}
+    		return config;
+    	};
+    	var setConfig = function (key, value) {
+    		localStorage.setItem('tabler-' + key, value);
+    	};
+    	var applyConfig = function () {
+    		disableTransitions();
+    		var config = getConfig();
+    		for (var key in config) {
+    			var value = config[key];
+    			eventsClean[key] && eventsClean[key].call();
+    			events[key + ':' + value] && events[key + ':' + value].call();
+    			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
+    				activeTrigger.classList.remove('active')
+    			});
+    			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
+    		}
+    	};
+    	applyConfig();
+    	for (var name in events) {
+    		var event = events[name];
+    		(function (event, name) {
+    			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
+    				updateThemeConfig(name);
+    				event.call();
+    				e.preventDefault();
+    				return false;
+    			});
+    		})(event, name);
+    	}
+    })();
+  </script>
+  <script>
+    document.body.style.display = "block"
+  </script>
+</body>
+</html>

demo/dist/css/demo.css

@@ -0,0 +1,136 @@
+/*!
+ * 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
+ */
+pre.highlight,
+.highlight pre {
+  max-height: 30rem;
+  margin: 1.5rem 0;
+  overflow: auto;
+  font-size: 0.7333333em;
+  background: #354052;
+  border-radius: 3px;
+  color: #ffffff; }
+  pre.highlight::-webkit-scrollbar,
+  .highlight pre::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    -webkit-transition: .3s background;
+    transition: .3s background; }
+  pre.highlight::-webkit-scrollbar-thumb,
+  .highlight pre::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: transparent; }
+  pre.highlight::-webkit-scrollbar-corner,
+  .highlight pre::-webkit-scrollbar-corner {
+    background: transparent; }
+  pre.highlight:hover::-webkit-scrollbar-thumb,
+  .highlight pre:hover::-webkit-scrollbar-thumb {
+    background: #cbcfd6;
+    background: #5d6675; }
+
+.highlight .c, .highlight .c1 {
+  color: #a0aec0; }
+
+.highlight .na, .highlight .nx, .highlight .nl, .language-css .highlight .na, .language-scss .highlight .na {
+  color: #ffe484; }
+
+.highlight .s, .highlight .dl, .highlight .s1, .highlight .s2, .highlight .mh {
+  color: #b5f4a5; }
+
+.highlight .mi, .highlight .language-js .nb, .highlight .nc, .highlight .nd, .highlight .nt {
+  color: #93ddfd; }
+
+.highlight .language-html .nt, .highlight .nb {
+  color: #ff8383; }
+
+.highlight .k, .highlight .kd, .highlight .nv, .highlight .n {
+  color: #d9a9ff; }
+
+.example {
+  padding: 2rem;
+  margin: 2rem 0;
+  border: 1px solid rgba(134, 140, 151, 0.24);
+  border-radius: 3px 3px 0 0;
+  position: relative;
+  min-height: 12rem;
+  display: flex;
+  align-items: center;
+  overflow-x: auto; }
+
+.example-centered {
+  justify-content: center; }
+  .example-centered .example-content {
+    flex: 0 auto; }
+
+.example-content {
+  font-size: 0.9375rem;
+  flex: 1;
+  max-width: 100%; }
+
+.example-bg {
+  background: #f5f7fb; }
+
+.example-code {
+  margin: 2rem 0;
+  border-top: none; }
+  .example-code pre {
+    margin: 0;
+    border-radius: 0 0 3px 3px; }
+  .example + .example-code {
+    margin-top: -2rem; }
+
+.example-column {
+  margin: 0 auto; }
+  .example-column > .card:last-of-type {
+    margin-bottom: 0; }
+
+.example-column-1 {
+  max-width: 20rem; }
+
+.example-column-2 {
+  max-width: 40rem; }
+
+.example-modal-backdrop {
+  background: #354052;
+  opacity: 0.24;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
+  height: 100%;
+  border-radius: 2px 2px 0 0; }
+
+@media not print {
+  .theme-dark .example-code {
+    border: 1px solid rgba(134, 140, 151, 0.24);
+    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-top: none; } }
+
+.card-sponsor {
+  background: #dbe7f6 no-repeat center/100% 100%;
+  border-color: #548ed2;
+  min-height: 316px; }
+
+body.no-transitions * {
+  transition: none !important; }
+
+.toc-entry:before {
+  content: '- '; }
+
+.toc-entry ul {
+  list-style: none;
+  padding-left: 1rem; }
+
+.toc-entry a {
+  color: #868c97; }
+/*# sourceMappingURL=demo.css.map */

demo/dist/css/demo.min.css

@@ -0,0 +1,7 @@
+/*!
+ * Tabler (v1.0.0-alpha.4)
+ * Copyright 2018-2020 The Tabler Authors
+ * Copyright 2018-2020 codecalm
+ * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+ */.highlight pre,pre.highlight{max-height:30rem;margin:1.5rem 0;overflow:auto;font-size:.7333333em;background:#354052;border-radius:3px;color:#fff}.highlight pre::-webkit-scrollbar,pre.highlight::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.highlight pre::-webkit-scrollbar-thumb,pre.highlight::-webkit-scrollbar-thumb{border-radius:5px;background:0 0}.highlight pre::-webkit-scrollbar-corner,pre.highlight::-webkit-scrollbar-corner{background:0 0}.highlight pre:hover::-webkit-scrollbar-thumb,pre.highlight:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#5d6675}.highlight .c,.highlight .c1{color:#a0aec0}.highlight .na,.highlight .nl,.highlight .nx,.language-css .highlight .na,.language-scss .highlight .na{color:#ffe484}.highlight .dl,.highlight .mh,.highlight .s,.highlight .s1,.highlight .s2{color:#b5f4a5}.highlight .language-js .nb,.highlight .mi,.highlight .nc,.highlight .nd,.highlight .nt{color:#93ddfd}.highlight .language-html .nt,.highlight .nb{color:#ff8383}.highlight .k,.highlight .kd,.highlight .n,.highlight .nv{color:#d9a9ff}.example{padding:2rem;margin:2rem 0;border:1px solid rgba(134,140,151,.24);border-radius:3px 3px 0 0;position:relative;min-height:12rem;display:flex;align-items:center;overflow-x:auto}.example-centered{justify-content:center}.example-centered .example-content{flex:0 auto}.example-content{font-size:.9375rem;flex:1;max-width:100%}.example-bg{background:#f5f7fb}.example-code{margin:2rem 0;border-top:none}.example-code pre{margin:0;border-radius:0 0 3px 3px}.example+.example-code{margin-top:-2rem}.example-column{margin:0 auto}.example-column>.card:last-of-type{margin-bottom:0}.example-column-1{max-width:20rem}.example-column-2{max-width:40rem}.example-modal-backdrop{background:#354052;opacity:.24;position:absolute;width:100%;left:0;top:0;height:100%;border-radius:2px 2px 0 0}@media not print{.theme-dark .example-code{border:1px solid rgba(134,140,151,.24);border-top:none}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto .example-code{border:1px solid rgba(134,140,151,.24);border-top:none}}.card-sponsor{background:#dbe7f6 no-repeat center/100% 100%;border-color:#548ed2;min-height:316px}body.no-transitions *{transition:none!important}.toc-entry:before{content:'- '}.toc-entry ul{list-style:none;padding-left:1rem}.toc-entry a{color:#868c97}
+/*# sourceMappingURL=demo.min.css.map */

demo/dist/css/tabler-flags.css

@@ -0,0 +1,801 @@
+/*!
+ * 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
+ */
+.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 rgba(134, 140, 151, 0.24);
+  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-md {
+  width: 2.66666rem;
+  height: 2rem; }
+
+.flag-lg {
+  width: 3.99999rem;
+  height: 3rem; }
+
+.flag-xl {
+  width: 5.33332rem;
+  height: 4rem; }
+/*# sourceMappingURL=tabler-flags.css.map */

demo/dist/css/tabler-payments.css

@@ -0,0 +1,385 @@
+/*!
+ * 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
+ */
+.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-sm {
+  width: 2.49999rem;
+  height: 1.5rem; }
+
+.payment-lg {
+  width: 4.99998rem;
+  height: 3rem; }
+
+.payment-xl {
+  width: 6.66664rem;
+  height: 4rem; }
+/*# sourceMappingURL=tabler-payments.css.map */

demo/dist/img/flags/ae.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480"><path fill="#00732f" d="M0 0h640v160H0z"/><path fill="#fff" d="M0 160h640v160H0z"/><path d="M0 320h640v160H0z"/><path fill="red" d="M0 0h220v480H0z"/></svg>

demo/dist/img/flags/ag.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480"><defs><clipPath id="a"><path fill-opacity=".7" d="M-79.7 0H603v512H-79.7z"/></clipPath></defs><g fill-rule="evenodd" clip-path="url(#a)" transform="translate(74.7) scale(.9375)"><path fill="#fff" d="M-120 0h763.3v511.5H-120z"/><path d="M-118.3.6h760.9v216.1h-761z"/><path fill="#0061ff" d="M21.3 203.2h505V317h-505z"/><path fill="#e20000" d="M642.8 1.8V512H262L642.8 1.7zm-761.5 0V512H262L-118.7 1.7z"/><path fill="#ffd600" d="M440.4 203.3L364 184l64.9-49-79.7 11.4 41-69.5-70.7 41L332.3 37l-47.9 63.8-19.3-74-21.7 76.3-47.8-65 13.7 83.2L138.5 78l41 69.5-77.4-12.5 63.8 47.8L86 203.3h354.3z"/></g></svg>

demo/dist/img/flags/al.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480"><path fill="#e41e20" d="M0 0h640v480H0z"/><path id="a" d="M272 93.3c-4.6 0-12.3 1.5-12.2 5-13-2.1-14.3 3.2-13.5 8 1.2-1.9 2.7-3 3.9-3.1 1.7-.3 3.5.3 5.4 1.4a21.6 21.6 0 0 1 4.8 4.1c-4.6 1.1-8.2.4-11.8-.2a16.5 16.5 0 0 1-5.7-2.4c-1.5-1-2-2-4.3-4.3-2.7-2.8-5.6-2-4.7 2.3 2.1 4 5.6 5.8 10 6.6 2.1.3 5.3 1 8.9 1 3.6 0 7.6-.5 9.8 0-1.3.8-2.8 2.3-5.8 2.8-3 .6-7.5-1.8-10.3-2.4.3 2.3 3.3 4.5 9.1 5.7 9.6 2 17.5 3.6 22.8 6.5a37.3 37.3 0 0 1 10.9 9.2c4.7 5.5 5 9.8 5.2 10.8 1 8.8-2.1 13.8-7.9 15.4-2.8.7-8-.7-9.8-2.9-2-2.2-3.7-6-3.2-12 .5-2.2 3.1-8.3.9-9.5a273.7 273.7 0 0 0-32.3-15.1c-2.5-1-4.5 2.4-5.3 3.8a50.2 50.2 0 0 1-36-23.7c-4.2-7.6-11.3 0-10.1 7.3 1.9 8 8 13.8 15.4 18 7.5 4.1 17 8.2 26.5 8 5.2 1 5.1 7.6-1 8.9-12.1 0-21.8-.2-30.9-9-6.9-6.3-10.7 1.2-8.8 5.4 3.4 13.1 22.1 16.8 41 12.6 7.4-1.2 3 6.6 1 6.7-8 5.7-22.1 11.2-34.6 0-5.7-4.4-9.6-.8-7.4 5.5 5.5 16.5 26.7 13 41.2 5 3.7-2.1 7.1 2.7 2.6 6.4-18.1 12.6-27.1 12.8-35.3 8-10.2-4.1-11 7.2-5 11 6.7 4 23.8 1 36.4-7 5.4-4 5.6 2.3 2.2 4.8-14.9 12.9-20.8 16.3-36.3 14.2-7.7-.6-7.6 8.9-1.6 12.6 8.3 5.1 24.5-3.3 37-13.8 5.3-2.8 6.2 1.8 3.6 7.3a53.9 53.9 0 0 1-21.8 18c-7 2.7-13.6 2.3-18.3.7-5.8-2-6.5 4-3.3 9.4 1.9 3.3 9.8 4.3 18.4 1.3 8.6-3 17.8-10.2 24.1-18.5 5.5-4.9 4.9 1.6 2.3 6.2-12.6 20-24.2 27.4-39.5 26.2-6.7-1.2-8.3 4-4 9 7.6 6.2 17 6 25.4-.2 7.3-7 21.4-22.4 28.8-30.6 5.2-4.1 6.9 0 5.3 8.4-1.4 4.8-4.8 10-14.3 13.6-6.5 3.7-1.6 8.8 3.2 9 2.7 0 8.1-3.2 12.3-7.8 5.4-6.2 5.8-10.3 8.8-19.9 2.8-4.6 7.9-2.4 7.9 2.4-2.5 9.6-4.5 11.3-9.5 15.2-4.7 4.5 3.3 6 6 4.1 7.8-5.2 10.6-12 13.2-18.2 2-4.4 7.4-2.3 4.8 5-6 17.4-16 24.2-33.3 27.8-1.7.3-2.8 1.3-2.2 3.3l7 7c-10.7 3.2-19.4 5-30.2 8l-14.8-9.8c-1.3-3.2-2-8.2-9.8-4.7-5.2-2.4-7.7-1.5-10.6 1 4.2 0 6 1.2 7.7 3.1 2.2 5.7 7.2 6.3 12.3 4.7 3.3 2.7 5 4.9 8.4 7.7l-16.7-.5c-6-6.3-10.6-6-14.8-1-3.3.5-4.6.5-6.8 4.4 3.4-1.4 5.6-1.8 7.1-.3 6.3 3.7 10.4 2.9 13.5 0l17.5 1.1c-2.2 2-5.2 3-7.5 4.8-9-2.6-13.8 1-15.4 8.3a17 17 0 0 0-1.2 9.3c.8-3 2.3-5.5 4.9-7 8 2 11-1.3 11.5-6.1 4-3.2 9.8-3.9 13.7-7.1 4.6 1.4 6.8 2.3 11.4 3.8 1.6 5 5.3 6.9 11.3 5.6 7 .2 5.8 3.2 6.4 5.5 2-3.3 1.9-6.6-2.5-9.6-1.6-4.3-5.2-6.3-9.8-3.8-4.4-1.2-5.5-3-9.9-4.3 11-3.5 18.8-4.3 29.8-7.8l7.7 6.8c1.5.9 2.9 1.1 3.8 0 6.9-10 10-18.7 16.3-25.3 2.5-2.8 5.6-6.4 9-7.3 1.7-.5 3.8-.2 5.2 1.3 1.3 1.4 2.4 4.1 2 8.2-.7 5.7-2.1 7.6-3.7 11-1.7 3.5-3.6 5.6-5.7 8.3-4 5.3-9.4 8.4-12.6 10.5-6.4 4.1-9 2.3-14 2-6.4.7-8 3.8-2.8 8.1 4.8 2.6 9.2 2.9 12.8 2.2 3-.6 6.6-4.5 9.2-6.6 2.8-3.3 7.6.6 4.3 4.5-5.9 7-11.7 11.6-19 11.5-7.7 1-6.2 5.3-1.2 7.4 9.2 3.7 17.4-3.3 21.6-8 3.2-3.5 5.5-3.6 5 1.9-3.3 9.9-7.6 13.7-14.8 14.2-5.8-.6-5.9 4-1.6 7 9.6 6.6 16.6-4.8 19.9-11.6 2.3-6.2 5.9-3.3 6.3 1.8 0 6.9-3 12.4-11.3 19.4 6.3 10.1 13.7 20.4 20 30.5l19.2-214L320 139c-2-1.8-8.8-9.8-10.5-11-.7-.6-1-1-.1-1.4.9-.4 3-.8 4.5-1-4-4.1-7.6-5.4-15.3-7.6 1.9-.8 3.7-.4 9.3-.6a30.2 30.2 0 0 0-13.5-10.2c4.2-3 5-3.2 9.2-6.7a86.3 86.3 0 0 1-19.5-3.8 37.4 37.4 0 0 0-12-3.4zm.8 8.4c3.8 0 6.1 1.3 6.1 2.9 0 1.6-2.3 2.9-6.1 2.9s-6.2-1.5-6.2-3c0-1.6 2.4-2.8 6.2-2.8z"/><use width="100%" height="100%" transform="matrix(-1 0 0 1 640 0)" xlink:href="#a"/></svg>

demo/dist/img/flags/am.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480"><path fill="red" d="M0 0h640v160H0z"/><path fill="#00f" d="M0 160h640v160H0z"/><path fill="orange" d="M0 320h640v160H0z"/></svg>

demo/dist/img/flags/ao.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480"><g fill-rule="evenodd" stroke-width="1pt"><path fill="red" d="M0 0h640v243.6H0z"/><path d="M0 236.4h640V480H0z"/></g><path fill="#ffec00" fill-rule="evenodd" d="M228.7 148.2c165.2 43.3 59 255.6-71.3 167.2l-8.8 13.6c76.7 54.6 152.6 10.6 174-46.4 22.2-58.8-7.6-141.5-92.6-150l-1.3 15.6z"/><path fill="#ffec00" fill-rule="evenodd" d="M170 330.8l21.7 10.1-10.2 21.8-21.7-10.2zm149-99.5h24v24h-24zm-11.7-38.9l22.3-8.6 8.7 22.3-22.3 8.7zm-26-29.1l17.1-16.9 16.9 17-17 16.9zm-26.2-39.8l22.4 8.4-8.5 22.4-22.4-8.4zM316 270l22.3 8.9-9 22.2-22.2-8.9zm-69.9 70l22-9.3 9.5 22-22 9.4zm-39.5 2.8h24v24h-24zm41.3-116l-20.3-15-20.3 14.6 8-23-20.3-15h24.5l8.5-22.6 7.8 22.7 24.7-.3-19.6 15.3 7 23.4z"/><path fill="#fe0" fill-rule="evenodd" d="M336 346.4c-1.2.4-6.2 12.4-9.7 18.2l3.7 1c13.6 4.8 20.4 9.2 26.2 17.5a7.9 7.9 0 0 0 10.2.7s2.8-1 6.4-5c3-4.5 2.2-8-1.4-11.1-11-8-22.9-14-35.4-21.3z"/><path fill-rule="evenodd" d="M365.3 372.8a4.3 4.3 0 1 1-8.7 0 4.3 4.3 0 0 1 8.6 0zm-21.4-13.6a4.3 4.3 0 1 1-8.7 0 4.3 4.3 0 0 1 8.7 0zm10.9 7a4.3 4.3 0 1 1-8.7 0 4.3 4.3 0 0 1 8.7 0z"/><path fill="#fe0" fill-rule="evenodd" d="M324.5 363.7c-42.6-24.3-87.3-50.5-130-74.8-18.7-11.7-19.6-33.4-7-49.9 1.2-2.3 2.8-1.8 3.4-.5 1.5 8 6 16.3 11.4 21.5C247 288.4 290 315.8 334 345.6c-3.4 5.8-6 12.3-9.5 18z"/><path fill="#ffec00" fill-rule="evenodd" d="M297.2 305.5l17.8 16-16 17.8-17.8-16z"/><path fill="none" stroke="#000" stroke-width="3" d="M331.5 348.8l-125-75.5m109.6 58.1L274 304.1m18.2 42.7L249.3 322"/></svg>

demo/dist/img/flags/aq.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480"><path fill="#3a7dce" fill-rule="evenodd" d="M0 0h640v480H0z"/><path fill="#fff" d="M184.8 225.3c-2.9-5.9-2.9-5.9-2.9-11.8-1.4 0-1.7.3-2.5 0-.8-.2-1.2 5.5-3.9 4.4-.4-.6 2-4.7-.6-6.4-.8-.5.2-3.9-.2-5.4 0 0-3.3 1.8-5.7-4.4-1.3-1.6-3 1.5-3 1.5s.8 1.9-.5 2.3c-1.9-1.4-3.2-.6-5.6-2.5-2.3-2 .5-4.1-4-5.7 3-7.4 3-6 10.2-8.9-4.4-3-4.4-3-7.3-7.4-4.3-1.4-5.7-3-10-5.9-5.8-7.3-8.7-22.1-8.7-32.4 3.6-3.5 8.6 11.8 15.9 16.2l10 4.4c5.8 3 7.3 6 11.6 8.9l13 4.4c5.8 4.4 8.7 10.3 13 11.8 4.7 0 5.6-2.7 7.1-3 8.5-.4 12.8-1.5 14.5-4 1.7-2.2 5.8 1.1 17.4-3.3l-1.5-6s3.1-2.5 7.3-1.4c-.2-2.7-.4-9.9 3.7-13.1-2.5-2.7-.9-4.6-.9-4.6s2.3-2.3 2.6-3.5c-1.2-6.5 1-6.6 1.6-8.5s-2-1.2-1.3-3.9c.7-2.6 4.9-3.2 5.5-5.4.5-2.2-1.2-3.3-1.1-3.8.9-2 .1-7 0-8.9 7.7-2 10.3-8.5 13-5.9 1.4-8.8 2.8-11.8 11.5-11.8 1.2-2.7-3.1-5-1.4-5.9 2.9-.3 5-.2 8.5 4.3 1 1.4 1.2-2 2.3-2.4 1-.4 3.7-.4 4-2.2.5-1.8 1-4.1 2.5-7 1.2-2.5 2.2.9 3.2 5.6 6.1.2 19.9 1.6 25.7 3.2 4.3 1.1 7.2-1.2 11.3-1.6 3.1 3.1 6 .8 7.6 7.5 2.3 3.6 6 .3 6.9 1.3 4.8 13.6 21.4 4.5 22.7 4.7 2 0 4.7 6 6.3 6 2.8-.5 2-2.4 4.4-1.7-.7 5.2 4.6 11 4.6 14.9 0 0 1.3.6 2.5-.5s2.3-4 3.3-4l6.5 1.2c7.8 2.8 11.8 3.4 14.8 4.8 1.5 2.6 2.8 4 5.7 3.5 2.4 1.6.6 3.8 2 3.9 3-1.5 3.9-3.1 6.8-1.6a17.6 17.6 0 0 1 7.2 7.4c0 1.4-1.5 7.3 0 16.2.7 3 1 5.3 4.1 10.3-.8 5.3 4 14 4 16.2 0 3-2.4 4.5-3.8 7.5 5.8 4.4 0 11.8-2.9 16.2 21.7 4.4 11.6 13.3 28.9 8.8-4.3 10.4-2.8 9.5 1.5 19.9-8.6 5.9-.2 7.7-6 15-.3.5 3.5 6.5 8.8 6.5-1.4 11.8-5.8 7.4-4.3 25-11.4-.2-6.8 13.3-14.4 11.9.4 8.4 4.3 9.2 2.8 17.7-5.7 1.5-5.7 1.5-8.6 5.9l-4.4-1.5c-1.4 7.4-4.3 8.9 0 16.3H439c-.1 2.5 2.5 3.2 3 5.9-.3 1-8.3 5.7-14.5 5.9-1.6 3.6 4.3 7.5 4 9.3-6.8 1.4-9.8 9.9-9.8 9.9s3.5 1.4 2.9 3c-1.9-1.5-2.9-1.6-5.8-1.6-1.4.4-5 0-8.3 5.8-3.7 1.2-5.5.8-8.3 4.6-1.2-3.7-3 0-5.2 1.4s-5.1 4.9-5.5 4.7c0-1 1.3-4.7 1.3-4.7l-7.2 1.5-.9.1c-.5 0-.4-4.3-1.8-4.1-1.3.1-5.2 5.5-6.6 5.6-1.3.2-1.7-1.7-2.9-1.5-1.1.2-3.4 5.6-4.2 5.8-.8.1-4-3.4-6.8-2.9-14.2 5.1-16.4-10-18.7-1.5-3-1.6-2.4-.7-5.4.1-2 .5-2.1-2.6-3.9-2.5-3.4 0-3.2 3.4-5.1 2.4-1.5-7-10.8-5.7-11.7-8.6-.7-3.1 4-3 5.6-5.2 1.1-3-1.3-4.1 3.5-7 6.2-4.3 2.6-6 3.7-9.2 2-4.6 2-5.8.4-9.9 0 0-4.9-13.2-5.8-13.2-3-.9-3 4.9-7.2 6.4-8.6 3-24-7.5-26.6-7.5-2.4 0-13.7 2.8-13.3-3-1.6 5.6-7.8 1.3-8.2 1.3-5.8 0-3.6 4.6-7.5 4.4-1.7-.6-19.5-1.6-19.5-1.6v3l-11.6-6-10-3c-8.7-2.9-4.4-10.3-18.8-5.8v-9H195c3-17.6 0-8.8-1.4-25l-5.8 1.5c-5.7-8 8-6.5-4.3-11.8 0 0 .2-8.8-2.9-6-.6.4 1.5 4.5 1.5 4.5-11.6-1.5-14.5-4.4-14.5-16.2 0 0 9.5 1.3 8.7 0a73 73 0 0 1-2.8-17.6c-.2-2 8.8-6.8 7-11.5 1.2-.4 4.4-.5 4.4-.5"/><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.1" d="M574.6 284.3a3 3 0 0 0 0 2.8c1-1.3.2-1.9 0-2.8z"/><path fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="2" d="M203.3 167.8s-2.4-.3-1.9 1.8c.8-1.7 1.8-1.7 1.9-1.8zm.5-5c-1.3 0-3-.2-2.4 2 .8-1.7 2.4-1.9 2.4-2zm9.1 28.3s2.1-.1 1.6 2c-.8-1.6-1.5-1.9-1.6-2z"/></svg>

demo/dist/img/flags/ar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480"><path fill="#74acdf" d="M0 0h640v480H0z"/><path fill="#fff" d="M0 160h640v160H0z"/><g id="c" transform="translate(-64) scale(.96)"><path id="a" fill="#f6b40e" stroke="#85340a" stroke-width="1.1" d="M396.8 251.3l28.5 62s.5 1.2 1.3.9c.8-.4.3-1.5.3-1.5l-23.7-64m-.7 24.1c-.4 9.4 5.4 14.6 4.7 23-.8 8.5 3.8 13.2 5 16.5 1 3.3-1.3 5.2-.3 5.7s3-2.1 2.4-6.8c-.7-4.6-4.2-6-3.4-16.3.8-10.3-4.2-12.7-3-22"/><use width="100%" height="100%" transform="rotate(22.5 400 250)" xlink:href="#a"/><use width="100%" height="100%" transform="rotate(45 400 250)" xlink:href="#a"/><use width="100%" height="100%" transform="rotate(67.5 400 250)" xlink:href="#a"/><path id="b" fill="#85340a" d="M404.3 274.4c.5 9 5.6 13 4.6 21.3 2.2-6.5-3.1-11.6-2.8-21.2m-7.7-23.8l19.5 42.6-16.3-43.9"/><use width="100%" height="100%" transform="rotate(22.5 400 250)" xlink:href="#b"/><use width="100%" height="100%" transform="rotate(45 400 250)" xlink:href="#b"/><use width="100%" height="100%" transform="rotate(67.5 400 250)" xlink:href="#b"/></g><use width="100%" height="100%" transform="rotate(90 320 240)" xlink:href="#c"/><use width="100%" height="100%" transform="rotate(180 320 240)" xlink:href="#c"/><use width="100%" height="100%" transform="rotate(-90 320 240)" xlink:href="#c"/><circle cx="320" cy="240" r="26.7" fill="#f6b40e" stroke="#85340a" stroke-width="1.4"/><path id="h" fill="#843511" d="M329.1 234.3c-1.8 0-3.6.8-4.6 2.4 2 1.9 6.6 2 9.7-.2a7 7 0 0 0-5.1-2.2zm0 .4c1.7 0 3.4.8 3.6 1.6-2 2.3-5.3 2-7.4.4a4.3 4.3 0 0 1 3.8-2z"/><use width="100%" height="100%" transform="matrix(-1 0 0 1 640.2 0)" xlink:href="#d"/><use width="100%" height="100%" transform="matrix(-1 0 0 1 640.2 0)" xlink:href="#e"/><use width="100%" height="100%" transform="translate(18.1)" xlink:href="#f"/><use width="100%" height="100%" transform="matrix(-1 0 0 1 640.2 0)" xlink:href="#g"/><path fill="#85340a" d="M316 243.7a1.9 1.9 0 1 0 1.8 2.9 4 4 0 0 0 2.2.6h.2a3.9 3.9 0 0 0 2.3-.6 1.9 1.9 0 1 0 1.8-3c.5.3.8.7.8 1.3 0 .6-.5 1.2-1.2 1.2a1.2 1.2 0 0 1-1.2-1.2 3 3 0 0 1-2.6 1.7 3 3 0 0 1-2.5-1.7 1.2 1.2 0 0 1-1.3 1.2c-.6 0-1.2-.6-1.2-1.2s.3-1 .8-1.2zm2 5.5c-2.1 0-3 1.8-4.8 3 1-.4 1.9-1.2 3.3-2s2.7.2 3.5.2c.8 0 2-1 3.5-.2 1.4.8 2.3 1.6 3.3 2-1.9-1.2-2.7-3-4.8-3a5.5 5.5 0 0 0-2 .6 5.5 5.5 0 0 0-2-.7z"/><path fill="#85340a" d="M317.2 251.6c-.8 0-1.8.2-3.4.6 3.7-.8 4.5.5 6.2.5 1.6 0 2.4-1.3 6.1-.5-4-1.2-4.9-.4-6.1-.4-.8 0-1.4-.3-2.8-.2z"/><path fill="#85340a" d="M314 252.2h-.8c4.3.5 2.3 3 6.8 3s2.5-2.5 6.8-3c-4.5-.4-3.1 2.3-6.8 2.3-3.5 0-2.4-2.3-6-2.3zm9.7 6.7a3.7 3.7 0 0 0-7.4 0 3.8 3.8 0 0 1 7.4 0z"/><path id="e" fill="#85340a" d="M303.4 234.3c4.7-4.1 10.7-4.8 14-1.7a8 8 0 0 1 1.5 3.5c.4 2.3-.3 4.8-2.1 7.4l.8.4a14.6 14.6 0 0 0 1.6-9.4 13.3 13.3 0 0 0-.6-2.3c-4.5-3.7-10.7-4-15.2 2z"/><path id="d" fill="#85340a" d="M310.8 233c2.7 0 3.3.7 4.5 1.7 1.2 1 1.9.8 2 1 .3.2 0 .8-.3.6-.5-.2-1.3-.6-2.5-1.6s-2.5-1-3.7-1c-3.7 0-5.7 3-6.2 2.8-.3-.2 2.1-3.5 6.2-3.5z"/><use width="100%" height="100%" transform="translate(-18.4)" xlink:href="#h"/><circle id="f" cx="310.9" cy="236.3" r="1.9" fill="#85340a"/><path id="g" fill="#85340a" d="M305.9 237.5c3.5 2.7 7 2.5 9 1.3 2-1.3 2-1.7 1.6-1.7-.4 0-.8.4-2.4 1.3-1.7.8-4.1.8-8.2-.9z"/></svg>

demo/dist/img/flags/at.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480"><g fill-rule="evenodd"><path fill="#fff" d="M640 480H0V0h640z"/><path fill="#df0000" d="M640 480H0V320h640zm0-319.9H0V.1h640z"/></g></svg>

demo/dist/img/flags/au.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480"><g stroke-width="1pt"><path fill="#006" d="M0 0h640v480H0z"/><path fill="#fff" d="M0 0v28l307 222h38.7v-28L38.7 0H0zm345.7 0v28l-307 222H0v-28L307 0h38.7z"/><path fill="#fff" d="M144 0v250h57.6V0H144zM0 83.3v83.4h345.7V83.3H0z"/><path fill="#c00" d="M0 100v50h345.7v-50H0zM155.6 0v250H190V0h-34.5zM0 250l115.2-83.3H141L25.8 250H0zM0 0l115.2 83.3H89.5L0 18.6V0zm204.7 83.3L319.9 0h25.8L230.5 83.3h-25.8zm141 166.7l-115.2-83.3h25.7l89.5 64.7V250z"/><path fill="#fff" fill-rule="evenodd" d="M299.8 392.5l-43.7 3.8 6 43.4L232 408l-30.1 31.7 6-43.4-43.7-3.8 37.7-22.3-24.3-36.5 41 15.5 13.4-41.7 13.5 41.7 41-15.5-24.3 36.5m224.4 62.3L476 416.7l17.8 6.7 5.8-18.1 5.8 18.1 17.8-6.7-10.5 15.8 16.4 9.7-19 1.7 2.6 18.9-13-13.9-13.2 13.9 2.6-18.9-19-1.6m16.4-291.9L476 134.6l17.8 6.7 5.8-18.1 5.8 18.1 17.8-6.7-10.5 15.8 16.4 9.8-19 1.6 2.6 18.9-13-13.8-13.2 13.7 2.6-18.8-19-1.6M380.8 265l-10.5-15.8 17.8 6.7 5.8-18.1 5.9 18.1 17.8-6.7L407 265l16.4 9.7-19 1.7 2.7 18.9-13.2-13.9-13 13.9 2.5-18.9-19-1.6m216.3-38L570 221l17.8 6.7 5.8-18.1 5.9 18.1 17.8-6.7-10.5 15.8 16.3 9.7-19 1.7 2.6 18.8-13-13.8-13.2 13.8 2.6-18.8-19-1.7M542 320l-10.3 6.5 2.9-11.9-9.3-7.8 12.1-1 4.6-11.2 4.7 11.3 12.1.9-9.3 7.8 2.9 11.9"/></g></svg>

demo/dist/img/flags/ax.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480"><defs><clipPath id="a"><path fill-opacity=".7" d="M106.3 0h1133.3v850H106.3z"/></clipPath></defs><g clip-path="url(#a)" transform="matrix(.56472 0 0 .56482 -60 -.1)"><path fill="#0053a5" d="M0 0h1300v850H0z"/><g fill="#ffce00"><path d="M400 0h250v850H400z"/><path d="M0 300h1300v250H0z"/></g><g fill="#d21034"><path d="M475 0h100v850H475z"/><path d="M0 375h1300v100H0z"/></g></g></svg>

demo/dist/img/flags/az.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480"><path fill="#3f9c35" d="M.1 0h640v480H.1z"/><path fill="#ed2939" d="M.1 0h640v320H.1z"/><path fill="#00b9e4" d="M.1 0h640v160H.1z"/><circle cx="304" cy="240" r="72" fill="#fff"/><circle cx="320" cy="240" r="60" fill="#ed2939"/><path fill="#fff" d="M384 200l7.7 21.5 20.6-9.8-9.8 20.7L424 240l-21.5 7.7 9.8 20.6-20.6-9.8L384 280l-7.7-21.5-20.6 9.8 9.8-20.6L344 240l21.5-7.7-9.8-20.6 20.6 9.8L384 200z"/></svg>

demo/dist/img/flags/ba.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480"><defs><clipPath id="a"><path fill-opacity=".7" d="M-85.3 0h682.6v512H-85.3z"/></clipPath></defs><g fill-rule="evenodd" clip-path="url(#a)" transform="translate(80) scale(.9375)"><path fill="#009" d="M-85.3 0h682.6v512H-85.3V0z"/><path fill="#FC0" d="M56.5 0l511 512.3V.3L56.5 0z"/><path fill="#FFF" d="M439.9 481.5L412 461.2l-28.6 20.2 10.8-33.2-28.2-20.5h35l10.8-33.2 10.7 33.3h35l-28 20.7 10.4 33zm81.3 10.4l-35-.1-10.7-33.3-10.8 33.2h-35l28.2 20.5-10.8 33.2 28.6-20.2 28 20.3-10.5-33 28-20.6zM365.6 384.7l28-20.7-35-.1-10.7-33.2-10.8 33.2-35-.1 28.2 20.5-10.8 33.3 28.6-20.3 28 20.4-10.5-33zm-64.3-64.5l28-20.6-35-.1-10.7-33.3-10.9 33.2h-34.9l28.2 20.5-10.8 33.2 28.6-20.2 27.9 20.3-10.4-33zm-63.7-63.6l28-20.7h-35L220 202.5l-10.8 33.2h-35l28.2 20.4-10.8 33.3 28.6-20.3 28 20.4-10.5-33zm-64.4-64.3l28-20.6-35-.1-10.7-33.3-10.9 33.2h-34.9L138 192l-10.8 33.2 28.6-20.2 27.9 20.3-10.4-33zm-63.6-63.9l27.9-20.7h-35L91.9 74.3 81 107.6H46L74.4 128l-10.9 33.2L92.1 141l27.8 20.4-10.3-33zm-64-64l27.9-20.7h-35L27.9 10.3 17 43.6h-35L10.4 64l-11 33.3L28.1 77l27.8 20.4-10.3-33zm-64-64L9.4-20.3h-35l-10.7-33.3L-47-20.4h-35L-53.7 0l-10.8 33.2L-35.9 13l27.8 20.4-10.3-33z"/></g></svg>

demo/dist/img/flags/bb.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480"><path fill="#00267f" d="M0 0h640v480H0z"/><path fill="#ffc726" d="M213.3 0h213.4v480H213.3z"/><path id="a" d="M319.8 135.5c-7 19-14 38.6-29.2 53.7 4.7-1.6 13-3 18.2-2.8v79.5l-22.4 3.3c-.8 0-1-1.3-1-3-2.2-24.7-8-45.5-14.8-67-.5-2.9-9-14-2.4-12 .8 0 9.5 3.6 8.2 1.9a85 85 0 0 0-46.4-24c-1.5-.3-2.4.5-1 2.2 22.4 34.6 41.3 75.5 41.1 124 8.8 0 30-5.2 38.7-5.2v56.1H320l2.5-156.7z"/><use width="100%" height="100%" transform="matrix(-1 0 0 1 639.5 0)" xlink:href="#a"/></svg>

demo/dist/img/flags/bd.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480"><path fill="#006a4e" d="M0 0h640v480H0z"/><circle cx="280" cy="240" r="160" fill="#f42a41"/></svg>

demo/dist/img/flags/be.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480"><g fill-rule="evenodd" stroke-width="1pt"><path d="M0 0h213.3v480H0z"/><path fill="#ffd90c" d="M213.3 0h213.4v480H213.3z"/><path fill="#f31830" d="M426.7 0H640v480H426.7z"/></g></svg>