Release 1.0.0-beta7

fix: #1010

.bundlewatch.config.json

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

.dependabot/config.yml

@@ -1,11 +0,0 @@
-# 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,23 +1,14 @@
 [*]
 charset=utf-8
 end_of_line=lf
-insert_final_newline=true
+insert_final_newline=false
+indent_style=tab
+tab_width=3
+max_line_length=off
+
+[*.{rb,yml,scss,json}]
 indent_style=space
 indent_size=2
 
-[*.svg]
-indent_style=tab
-tab_width=3
-
-[*.html]
-indent_style=tab
-indent_size=3
-insert_final_newline=false
-
-[*.md]
-indent_style=tab
-tab_width=3
-
 [*.js.map]
-indent_style=tab
 indent_size=3

.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/ISSUE_TEMPLATE/bug_report.md

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

.github/ISSUE_TEMPLATE/feature_request.md

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

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,67 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ dev, master ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ dev ]
+  schedule:
+    - cron: '32 8 * * 2'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        # Learn more:
+        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.github/workflows/preview.yml

@@ -0,0 +1,46 @@
+name: Build and deploy preview
+
+on:
+  push:
+    branches:
+      - main
+      - dev-gh
+
+env:
+  NODE: 14
+
+jobs:
+  github-pages:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "${{ env.NODE }}"
+          cache: npm
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 2.6
+          bundler-cache: true
+
+      - run: ruby --version
+      - run: node --version
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Build preview
+        run: npm run preview
+
+      - name: Sync files
+        uses: SamKirkland/FTP-Deploy-Action@4.1.0
+        with:
+          server: ${{ secrets.PREVIEW_HOST }}
+          username: ${{ secrets.PREVIEW_USER }}
+          password: ${{ secrets.PREVIEW_PASSWORD }}
+          local-dir: ./demo/

.github/workflows/test.yml

@@ -0,0 +1,36 @@
+name: Test build
+
+on:
+  pull_request:
+    types: [ opened, reopened ]
+
+env:
+  NODE: 14
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "${{ env.NODE }}"
+          cache: npm
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 2.6
+          bundler-cache: true
+
+      - run: ruby --version
+      - run: node --version
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build

.gitignore

@@ -1,15 +1,16 @@
 node_modules/
-/package-lock.json
 .idea/
 /db.json
 .jekyll-metadata
 .jekyll-cache
-tmp/
+/tmp/
+/.tmp/
+/tmp-dist/
 /yarn.lock
 .DS_Store
-/Gemfile.lock
 /_site/
 /.cache/
+.sass-cache/
 
 .vscode/
 
@@ -19,3 +20,5 @@ tmp/
 /resources/
 /svg-tmp/
 /components/
+/percy.sh
+/src/pages/playground.html

.gitpod.yml

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

.percy.yml

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

CHANGELOG.md

@@ -0,0 +1,74 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+
+## `1.0.0-beta` - 2021-02-17
+
+**Initial beta release of Tabler v1.0! Lots more coming soon though 😁**
+
+- update Bootstrap to 5.0.0-beta2
+- update other dependencies.
+
+
+## `1.0.0-beta2` - 2021-03-29
+
+- update dependencies
+- `li` marker fix
+- page wrapper, nav fixes
+- scripts optimize, remove `capture_once`
+- `page-body` fixes
+- layout navbar fix
+- typography fix
+- ribbon fix
+- charts label fixes
+- charts docs
+
+
+## `1.0.0-beta3` - 2021-05-08
+
+- upgrade Bootstrap to 5.0
+- upgrade dependencies
+- change `$border-radius-pill` variable
+- badge vertical align fix
+
+
+## `1.0.0-beta4` - 2021-10-24
+
+- upgrade required node.js version to 14
+- upgrade Bootstrap to 5.1
+- upgrade dependencies
+- fix #775  litepicker not initializing
+- fix `nouislider` import in dev
+
+
+## `1.0.0-beta5` - 2021-12-07
+
+**Tabler has finally lived to see dark mode! 🌝🌚**
+
+- **Dark mode enabled!**
+- add more cursors (#947)
+- fix #892 - Media queries need to be nested when negating
+- update `@tabler/icons` to newest version
+- move optional dependencies to peerDependencies (#924)
+- move deployment to Github Actions (#934)
+- table border fixes
+- antialiased fix
+- update `@tabler/icons` to version 1.42
+- change default font to 'Inter'
+- colors unify
+- add `tom-select` and remove `choices.js`
+
+
+## `1.0.0-beta6` - 2021-01-18
+
+- pricing cards fix
+- fix bug `fw-...`, `.fs-...` is missed (#987)
+- avatar class fix
+- fix bug #903 `litepicker` with date range not having correct border
+- page wrapper fix
+- fix #900 `is-invalid-lite` class is not working under `was-validated` form class
+- update `@tabler/icons` to version 1.48
+- fix #960 - Badges not honoring font sizes
+- fix #959 - `node-sass` does not properly compile nested media queries
+- update package dependencies to newest version

Gemfile

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

Gemfile.lock

@@ -0,0 +1,84 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.9)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7)
+    ffi (1.15.5)
+    forwardable-extended (2.6.0)
+    htmlbeautifier (1.4.1)
+    htmlcompressor (0.4.0)
+    http_parser.rb (0.8.0)
+    i18n (1.9.1)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.2.1)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (~> 2.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (~> 0.4.0)
+      pathutil (~> 0.9)
+      rouge (~> 3.0)
+      safe_yaml (~> 1.0)
+      terminal-table (~> 2.0)
+    jekyll-random (0.1)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-redirect-from (0.16.0)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-sass-converter (2.1.0)
+      sassc (> 2.0.1, < 3.0)
+    jekyll-tidy (0.2.2)
+      htmlbeautifier
+      htmlcompressor
+      jekyll
+    jekyll-timeago (0.14.0)
+      mini_i18n (>= 0.8.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.3.1)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.3)
+    listen (3.7.1)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    mini_i18n (0.8.0)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (4.0.6)
+    rb-fsevent (0.11.0)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.5)
+    rouge (3.27.0)
+    safe_yaml (1.0.5)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    terminal-table (2.0.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    unicode-display_width (1.8.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll (= 4.2.1)
+  jekyll-random
+  jekyll-redirect-from
+  jekyll-tidy
+  jekyll-timeago
+
+BUNDLED WITH
+   2.1.4

LICENSE

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

README.md

@@ -1,67 +1,131 @@
-# Tabler
 
-Premium and Open Source dashboard template with responsive and high-quality UI.
+<p align="center">
+<a href="https://github.com/tabler/tabler"><img src="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/logo.svg" alt="A premium and open source dashboard template with a responsive and high-quality UI." width="300"></a><br><br>
+A premium and open source dashboard template with a responsive and high-quality UI.
+</p>
 
-👉 [Become a sponsor to Tabler](https://github.com/sponsors/codecalm) 🚀
+<p align="center">
+<a href="https://www.npmjs.com/package/@tabler/core" target="__blank"><img src="https://img.shields.io/npm/v/@tabler/core?color=1864ab&label=Latest+version" alt="NPM version"></a>
+<a href="https://www.npmjs.com/package/@tabler/core" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@tabler/core?color=1971c2&label=Downloads"></a>
+<a href="https://preview.tabler.io" target="__blank"><img src="https://img.shields.io/static/v1?label=Demo&message=preview&color=228be6" alt="Tabler preview"></a>
+<a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg?label=License&message=MIT&color=1c7ed6" alt="License"></a>
+<a href="https://github.com/tabler/tabler/archive/dev.zip" target="__blank"><img src="https://img.shields.io/static/v1?label=Download&message=ZIP&color=339af0" alt="Tabler preview"></a>
+<br>
+<a href="https://github.com/tabler/tabler" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/tabler/tabler?style=social"></a>
+</p>
 
-<br><br><br>
-
-[![Backers on Open Collective](https://opencollective.com/tabler/backers/badge.svg)](#backers)
- [![Sponsors on Open Collective](https://opencollective.com/tabler/sponsors/badge.svg)](#sponsors)
+<p align="center">
+  <a href="https://github.com/sponsors/codecalm">
+    <img src='https://raw.githubusercontent.com/tabler/static/main/sponsors.svg'>
+  </a>
+</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://goo.gl/zJP2dT">Join us on Slack</a></strong>
+## Preview
 
-![Tabler preview](https://raw.githubusercontent.com/tabler/tabler/dev/static/img/tabler-preview.png)
+Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love! Choose the layouts and components you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful! <a href="https://preview.tabler.io">Show me demo</a>
 
-## Status
+<a href="https://preview.tabler.io" target="_blank"><img src="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/tabler-preview.png" alt="Tabler preview"></a>
 
-<a href="https://www.npmjs.com/package/tabler-ui"><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-ui.svg" alt="Total Downloads"></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://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a>
 
 ## Features
 
-We created this admin panel for everyone who wants to create any 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 a basic HTML and CSS (and some [Liquid](https://github.com/Shopify/liquid/wiki)) knowledge—as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
+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!
 
-* **Responsive:** With support for mobile, tablet and desktop it doesn’t matter what device you’re using. Tabler is responsive in all major browsers.
-* **Cross Browser:** Our theme works perfectly with Latest Chrome, Firefox+, Latest Safari, Opera, Edge and mobile browsers. We work hard to continuously support them.
-* **HTML5 & CSS3:** We only use modern web technologies like HTML5 and CSS3. Our theme includes some subtle CSS3 animations so you will get anyone’s attention.
-* **Clean Code:** We strictly followed Bootstrap’s guidelines to make your integration as easy as possible. All code is handwritten and W3C valid.
-* **Demo pages**: Tabler features over 20 individual pages featuring various components, giving you the freedom to choose and combine. All components can take variation in color and styling that can easily be modified using Sass. The sky is the limit!
+* **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
+
+Documentation is available as a part of Tabler preview: https://preview.tabler.io/docs/
+
+## Sponsor Tabler
+
+<a href="https://github.com/sponsors/codecalm" target="_blank"><img src="/src/static/sponsor-banner-readme.png?raw=true" alt="Sponsor Tabler" /></a>
+
+
+### Sponsors
+
+Support this project by becoming a sponsor. Your logo will show up in this README with a link to your website. [Become a sponsor!](https://opencollective.com/tabler#sponsor)
+
+<a href="https://opencollective.com/tabler/tiers/sponsor/0/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/0/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/1/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/1/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/2/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/2/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/3/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/3/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/4/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/4/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/5/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/5/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/6/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/6/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/7/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/7/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/8/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/8/avatar.svg" /></a>
+<a href="https://opencollective.com/tabler/tiers/sponsor/9/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/9/avatar.svg" /></a>
+
+
 ## Setup environment
 
-To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow these steps:
+To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow the steps below:
 
 1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
 2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
-3. [Install Ruby](https://ruby-lang.org/en/documentation/installation/), 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`. This will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
+3. [Install Ruby](https://www.ruby-lang.org/en/documentation/installation/) - the recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
+4. [Install Bundler](https://bundler.io) with `gem install bundler` and finally run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
 
 **Windows users**:
-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 default shell.
-2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/), 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).
+
+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.
 
-When completed, you'll be able to run the various commands provided from the command line.
+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 `/pages` directory will build application and refresh the page.
+3. Any change in the `/src` directory will build the application and refresh the page.
 
 **Note**:
 Run `npm run build` for reforms a one off build application without refresh.
 Open [http://localhost:3001](http://localhost:3001) to configure the Web server.
 
+## Installation
+
+Tabler is distributed via npm.
+
+```sh
+npm install --save @tabler/core
+```
+
+### CDN support
+
+All files included in `@tabler/core` npm package are available over a CDN.
+
+#### Javascript
+
+```html
+<script src="https://unpkg.com/@tabler/core@latest/dist/js/tabler.min.js"></script>
+```
+
+#### Styles
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@tabler/core@latest/dist/css/tabler.min.css">
+```
+
 ## Feature requests
 
 https://tabler.canny.io/feature-requests
 
+
 ## 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).
+
 
 ## Creators
 
@@ -71,33 +135,25 @@ Have a bug or a feature request? [Please open a new issue](https://github.com/ta
 - <https://github.com/codecalm>
 - <https://codecalm.net>
 
-## Contributors
 
-This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
-<a href="https://github.com/tabler/tabler/graphs/contributors"><img src="https://opencollective.com/tabler/contributors.svg?width=890&button=false"></a>
+### Contributors
 
-## Backers
+This project exists thanks to all the people who contribute.
 
-Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/tabler#backer)]
+<img src="https://opencollective.com/tabler/contributors.svg?width=890&button=false" />
 
-<a href="https://opencollective.com/tabler#backers" target="_blank"><img src="https://opencollective.com/tabler/backers.svg?width=890"></a>
+### Backers
 
+Thank you to all our backers! 🙏 [Become a backer](https://opencollective.com/tabler#backer)
 
-## Sponsors
+<a href="https://opencollective.com/tabler#backers" target="_blank"><img src="https://opencollective.com/tabler/tiers/backer.svg?width=890&button=false" /></a>
 
-Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/tabler#sponsor)]
+## Thanks
 
-<a href="https://opencollective.com/tabler/sponsor/0/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/0/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/1/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/1/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/2/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/2/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/3/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/3/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/4/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/4/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/5/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/5/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/6/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/6/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/7/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/7/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/8/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/8/avatar.svg"></a>
-<a href="https://opencollective.com/tabler/sponsor/9/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/9/avatar.svg"></a>
+<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
 
-## Copyright and license
+Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.
 
-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).
+## License
+
+See the [LICENSE](https://github.com/tabler/tabler/blob/master/LICENSE) file.

_config.yml

@@ -1,109 +1,135 @@
-source: pages
+source: src/pages
 destination: tmp
 
-version: 1.0-alpha
+keep_files:
+  - css
+  - js
+  - img
+  - dist
+  - static
+  - playground.html
+
+use-iconfont: false
+rtl: false
+
 title: Tabler
 description: Premium and Open Source dashboard template with responsive and high quality UI.
-github_url: https://github.com/tabler/tabler
+homepage: https://tabler.io
+github-url: https://github.com/tabler/tabler
+github-sponsors-url: https://github.com/sponsors/codecalm
+changelog-url: https://github.com/tabler/tabler/releases
+sponsor-url: https://github.com/sponsors/codecalm
+preview-url: https://preview.tabler.io
 
-debug: true
+mapbox-key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
+google-maps-key: AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI
+google-maps-dev-key: AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw
+npm-package: "@tabler/core"
+
+debug: false
+
+layout-dark: false
 
 plugins:
-- jekyll-random
-- jekyll-tidy
-- jekyll-timeago
-- jekyll-redirect-from
-- jekyll-include-cache
+  - jekyll-random
+  - jekyll-tidy
+  - jekyll-timeago
+  - jekyll-redirect-from
+
+tabler-css-plugins:
+  - tabler-flags
+  - tabler-payments
+  - tabler-vendors
 
 exclude:
-- .jekyll-cache
-
-keep_files:
-- css/ui-kit.css
-- css/dark.css
-- css/rtl.css
-#- js/ui-kit.js
+  - .jekyll-cache
+  - redirects.json
 
 markdown: kramdown
-highlighter: rouge
-
 kramdown:
+  input: GFM
   syntax_highlighter: rouge
-  syntax_highlighter_opts:
-    css_class: ''
-    span:
-      line_numbers: false
 
 jekyll_tidy:
   compress_html: false
   ignore_env: development
 
-
 collections:
   docs:
     output: true
-  changelog:
-    output: false
-  components:
-    output: true
 
 defaults:
-  -
-    scope:
-      type: pages
+  - scope:
+      type: "pages"
+      path: "*.md"
+    values:
+      layout: markdown
+  - scope:
+      type: "pages"
     values:
       layout: default
-      nav-position: top
-  -
-    scope:
-      type: docs
+  - scope:
+      type: "docs"
     values:
       layout: docs
-      nav-position: top
-  -
-    scope:
-      type: components
-    values:
-      layout: component
-
 
 colors:
   blue:
+    class: blue
     hex: '#206bc4'
     title: Blue
   azure:
+    class: azure
     hex: '#45aaf2'
     title: Azure
   indigo:
+    class: indigo
     hex: '#6574cd'
     title: Indigo
   purple:
+    class: purple
     hex: '#a55eea'
     title: Purple
   pink:
+    class: pink
     hex: '#f66d9b'
     title: Pink
   red:
+    class: red
     hex: '#fa4654'
     title: Red
   orange:
+    class: orange
     hex: '#fd9644'
     title: Orange
   yellow:
+    class: yellow
     hex: '#f1c40f'
     title: Yellow
   lime:
+    class: lime
     hex: '#7bd235'
     title: Lime
   green:
+    class: green
     hex: '#5eba00'
     title: Green
   teal:
+    class: teal
     hex: '#2bcbba'
     title: Teal
   cyan:
+    class: cyan
     hex: '#17a2b8'
     title: Cyan
+
+colors-extra:
+  white:
+    hex: '#ffffff'
+    title: White
+  dark:
+    hex: '#303645'
+    title: Dark
   gray:
     hex: '#868e96'
     title: Gray
@@ -112,13 +138,13 @@ variants:
   - name: success
     icon: check
   - name: info
-    icon: info
+    icon: info-circle
   - name: warning
     icon: alert-triangle
   - name: danger
-    icon: x-octagon
+    icon: alert-circle
 
-button-variants:
+theme-colors:
   primary:
     class: primary
     title: Primary
@@ -143,9 +169,6 @@ button-variants:
   dark:
     class: dark
     title: Dark
-  link:
-    class: link
-    title: Link
 
 button-states:
   - class:
@@ -157,47 +180,47 @@ button-states:
 
 socials:
   facebook:
-    icon: brand/facebook
+    icon: brand-facebook
     title: Facebook
   twitter:
-    icon: brand/twitter
+    icon: brand-twitter
     title: Twitter
   google:
-    icon: brand/google
+    icon: brand-google
     title: Google
   youtube:
-    icon: brand/youtube
+    icon: brand-youtube
     title: Youtube
   vimeo:
-    icon: brand/vimeo
+    icon: brand-vimeo
     title: Vimeo
   dribbble:
-    icon: brand/dribbble
+    icon: brand-dribbble
     title: Dribbble
   github:
-    icon: brand/github
+    icon: brand-github
     title: Github
   instagram:
-    icon: brand/instagram
+    icon: brand-instagram
     title: Instagram
   pinterest:
-    icon: brand/pinterest
+    icon: brand-pinterest
     title: Pinterest
   vk:
-    icon: brand/vk
+    icon: brand-vk
     title: VK
   rss:
-    icon: brand/rss
+    icon: rss
     title: RSS
   flickr:
-    icon: brand/flickr
+    icon: brand-flickr
     title: Flickr
   bitbucket:
-    icon: brand/bitbucket
-    title: Bitbucker
+    icon: brand-bitbucket
+    title: Bitbucket
   tabler:
-    icon: brand/tabler
+    icon: brand-tabler
     title: Tabler
 
-months_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-months_long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+months-short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+months-long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

build/banner.js

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

build/browsersync.js

@@ -1,36 +0,0 @@
-/*
- * Tabler (v0.9.0): browsersync.js
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
-
-const bs = require('browser-sync').create();
-
-bs.init({
-  watch: true,
-  server: {
-    routes: {
-      '/': 'tmp',
-      '/dist': 'dist',
-      '/dist/fonts': 'fonts',
-      '/libs': 'static/libs',
-      '/img': 'static/img',
-      '/node_modules': 'node_modules',
-    },
-  },
-  files: ['tmp/**/*', 'dist/css/*.css', 'dist/js/*.js'],
-  watchOptions: {
-    ignoreInitial: true,
-  },
-  notify: false,
-  open: false,
-  snippetOptions: {
-    rule: {
-      match: /<\/head>/i,
-      fn: function (snippet, match) {
-        return snippet + match;
-      }
-    }
-  }
-});

build/capture-components.sh

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

build/copy-libs.js

@@ -1,11 +0,0 @@
-const libs = require('../pages/_data/libs'),
-  path = require('path'),
-  { exec } = require('child_process');
-
-const all_libs = libs.js.concat(libs.css);
-
-all_libs.forEach(function (lib) {
-  let dirname = path.dirname(lib).replace('@', '');
-  let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${lib} dist/libs/${lib.replace('@', '')}`;
-  exec(cmd)
-});

build/postcss.config.js

@@ -1,24 +0,0 @@
-/*
- * Tabler (v0.9.0): postcss.config.js
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
-
-'use strict';
-
-module.exports = ctx => ({
-  map: ctx.file.dirname.includes('examples') ?
-    false :
-    {
-      inline: false,
-      annotation: true,
-      sourcesContent: true
-    },
-  plugins: {
-    autoprefixer: {
-      cascade: false,
-      grid: "autoplace"
-    }
-  }
-});

build/rollup.config.js

@@ -1,51 +0,0 @@
-/*
- * Tabler (v0.9.0): rollup.config.js
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
-
-'use strict';
-
-const BUNDLE  = process.env.BUNDLE === 'true';
-
-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'),
-    'tabler-charts': path.resolve(__dirname, '../js/tabler-charts.js'),
-  },
-  output: {
-    banner,
-    // name: 'tabler',
-    dir: path.resolve(__dirname, `../dist/js/`),
-    entryFileNames: BUNDLE ? '[name].min.js' : '[name].js',
-    format: 'cjs'
-  },
-  plugins,
-};

build/scss-compile.js

@@ -1,46 +0,0 @@
-/*
- * Tabler (v0.9.0): scss-compile.js
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
-
-const path = require('path'),
-  glob = require("glob"),
-  fs = require("fs"),
-  sass = require("node-sass"),
-  packageImporter = require('node-sass-package-importer');
-
-glob("scss/tabler*.scss", {}, function (er, files) {
-  files.forEach(function(file){
-    var basename = path.basename(file, '.scss');
-    
-    sass.render(
-      {
-        file: file,
-        outFile: `dist/css/${basename}.css`,
-        sourceMap: true,
-        sourceMapContents: true,
-        precision: 6,
-        importer: packageImporter()
-      },
-      (error, result) => {
-        if (!error) {
-          fs.writeFile(`dist/css/${basename}.css`, result.css, error => {
-            if (error) {
-              console.log(error);
-            }
-          });
-
-          fs.writeFile(`dist/css/${basename}.css.map`, result.map, error => {
-            if (error) {
-              console.log(error);
-            }
-          });
-        } else {
-          throw error;
-        }
-      }
-    );
-  });
-});

build/unused-files.js

@@ -1,27 +0,0 @@
-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);
-  }
-});
-
-// console.log('foundFiles', foundFiles);
-// console.log('includeFiles', includeFiles);

demo/404.html

@@ -1,128 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Page 404 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased  border-top-2 border-primary">
-    <div class="empty">
-      <div class="empty-icon">
-        <div class="display-4">404</div>
-      </div>
-      <p class="empty-title h3">Oops&hellip; 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">
-          Search again
-        </a>
-      </div>
-    </div>
-    <script>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
-    <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-    <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
-    <!-- Tabler Plugins -->
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.addEventListener("DOMContentLoaded", function(event) {
-         window.ApexCharts && (new ApexCharts(document.getElementById('chart-revenue-bg'), {
-            chart: {
-               type: 'area',
-               height: 40.0,
-            sparkline: {
-               enabled: true
-            },
-            },
-            fill: {
-               opacity: .16
-            },
-            series: [{
-               name: 'Profits',
-               data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
-            }],
-            xaxis: {
-               type: 'datetime',
-            },
-            labels: [...Array(30).keys()].map(n => `2019-09-${n+1}`),
-            colors: [
-               tabler.colors["blue"]
-            ],
-         })).render();
-      });
-    </script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
-  </body>
-</html>

demo/accordion.html

@@ -0,0 +1,584 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta7
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Accordion - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+  </head>
+  <body >
+    <div class="page">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item d-none d-md-flex me-3">
+              <div class="btn-list">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  Source code
+                </a>
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                  Sponsor
+                </a>
+              </div>
+            </div>
+            <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+              </a>
+              <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+              </a>
+              <div class="nav-item dropdown d-none d-md-flex me-3">
+                <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                  <span class="badge bg-red"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Last updates</h3>
+                    </div>
+                    <div class="list-group list-group-flush list-group-hoverable">
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 1</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              Change deprecated html tags to text decoration classes (#29604)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 2</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              justify-content:between ⇒ justify-content:space-between (#29734)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions show">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 3</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              Update change-version.js (#29736)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 4</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              Regenerate package-lock.json (#29730)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Set status</a>
+                <a href="#" class="dropdown-item">Profile & account</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" class="dropdown-item">Settings</a>
+                <a href="#" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="./index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item active dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html" >
+                          Empty page
+                        </a>
+                        <a class="dropdown-item active" href="./accordion.html" >
+                          Accordion
+                        </a>
+                        <a class="dropdown-item" href="./blank.html" >
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html" >
+                          Buttons
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Cards
+                            <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./cards.html" class="dropdown-item">
+                              Sample cards
+                            </a>
+                            <a href="./card-actions.html" class="dropdown-item">
+                              Card actions
+                              <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                            </a>
+                            <a href="./cards-masonry.html" class="dropdown-item">
+                              Cards Masonry
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./colors.html" >
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="./dropdowns.html" >
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="./modals.html" >
+                          Modals
+                        </a>
+                        <a class="dropdown-item" href="./maps.html" >
+                          Maps
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html" >
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html" >
+                          Vector maps
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html" >
+                          Navigation
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./charts.html" >
+                          Charts
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html" >
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html" >
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html" >
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tables.html" >
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./carousel.html" >
+                          Carousel
+                        </a>
+                        <a class="dropdown-item" href="./lists.html" >
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./typography.html" >
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html" >
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html" >
+                          Markdown
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                          </div>
+                        </div>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Error pages
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./error-404.html" class="dropdown-item">
+                              404 page
+                            </a>
+                            <a href="./error-500.html" class="dropdown-item">
+                              500 page
+                            </a>
+                            <a href="./error-maintenance.html" class="dropdown-item">
+                              Maintenance page
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./activity.html" >
+                      Activity
+                    </a>
+                    <a class="dropdown-item" href="./gallery.html" >
+                      Gallery
+                    </a>
+                    <a class="dropdown-item" href="./invoice.html" >
+                      Invoice
+                    </a>
+                    <a class="dropdown-item" href="./search-results.html" >
+                      Search results
+                    </a>
+                    <a class="dropdown-item" href="./pricing.html" >
+                      Pricing cards
+                    </a>
+                    <a class="dropdown-item" href="./users.html" >
+                      Users
+                    </a>
+                    <a class="dropdown-item" href="./license.html" >
+                      License
+                    </a>
+                    <a class="dropdown-item" href="./music.html" >
+                      Music
+                    </a>
+                    <a class="dropdown-item" href="./uptime.html" >
+                      Uptime monitor
+                      <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                    </a>
+                    <a class="dropdown-item" href="./widgets.html" >
+                      Widgets
+                    </a>
+                    <a class="dropdown-item" href="./wizard.html" >
+                      Wizard
+                    </a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html" >
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html" >
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html" >
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html" >
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html" >
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html" >
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html" >
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html" >
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html" >
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html" >
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./icons.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      1518 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./docs/index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-text -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Documentation
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./changelog.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-plus -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="12" y1="11" x2="12" y2="17" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Changelog
+                    </span>
+                  </a>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/search -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                    </span>
+                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="page-wrapper">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header d-print-none">
+            <div class="row align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Accordion
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="card">
+              <div class="card-body">
+                <div class="accordion" id="accordion-example">
+                  <div class="accordion-item">
+                    <h2 class="accordion-header" id="heading-1">
+                      <button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true">
+                        Accordion Item #1
+                      </button>
+                    </h2>
+                    <div id="collapse-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-example">
+                      <div class="accordion-body pt-0">
+                        <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+                      </div>
+                    </div>
+                  </div>
+                  <div class="accordion-item">
+                    <h2 class="accordion-header" id="heading-2">
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false">
+                        Accordion Item #2
+                      </button>
+                    </h2>
+                    <div id="collapse-2" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
+                      <div class="accordion-body pt-0">
+                        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+                      </div>
+                    </div>
+                  </div>
+                  <div class="accordion-item">
+                    <h2 class="accordion-header" id="heading-3">
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false">
+                        Accordion Item #3
+                      </button>
+                    </h2>
+                    <div id="collapse-3" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
+                      <div class="accordion-body pt-0">
+                        <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+                      </div>
+                    </div>
+                  </div>
+                  <div class="accordion-item">
+                    <h2 class="accordion-header" id="heading-4">
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="false">
+                        Accordion Item #4
+                      </button>
+                    </h2>
+                    <div id="collapse-4" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
+                      <div class="accordion-body pt-0">
+                        <strong>This is the fourth item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                  <li class="list-inline-item">
+                    <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2022
+                    <a href="." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta7
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
+  </body>
+</html>

demo/activity.html

@@ -0,0 +1,786 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta7
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Activity - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+  </head>
+  <body >
+    <div class="page">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item d-none d-md-flex me-3">
+              <div class="btn-list">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  Source code
+                </a>
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                  Sponsor
+                </a>
+              </div>
+            </div>
+            <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+              </a>
+              <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+              </a>
+              <div class="nav-item dropdown d-none d-md-flex me-3">
+                <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                  <span class="badge bg-red"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Last updates</h3>
+                    </div>
+                    <div class="list-group list-group-flush list-group-hoverable">
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 1</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              Change deprecated html tags to text decoration classes (#29604)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 2</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              justify-content:between ⇒ justify-content:space-between (#29734)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions show">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 3</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              Update change-version.js (#29736)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 4</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              Regenerate package-lock.json (#29730)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Set status</a>
+                <a href="#" class="dropdown-item">Profile & account</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" class="dropdown-item">Settings</a>
+                <a href="#" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="./index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html" >
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./accordion.html" >
+                          Accordion
+                        </a>
+                        <a class="dropdown-item" href="./blank.html" >
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html" >
+                          Buttons
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Cards
+                            <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./cards.html" class="dropdown-item">
+                              Sample cards
+                            </a>
+                            <a href="./card-actions.html" class="dropdown-item">
+                              Card actions
+                              <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                            </a>
+                            <a href="./cards-masonry.html" class="dropdown-item">
+                              Cards Masonry
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./colors.html" >
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="./dropdowns.html" >
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="./modals.html" >
+                          Modals
+                        </a>
+                        <a class="dropdown-item" href="./maps.html" >
+                          Maps
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html" >
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html" >
+                          Vector maps
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html" >
+                          Navigation
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./charts.html" >
+                          Charts
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html" >
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html" >
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html" >
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tables.html" >
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./carousel.html" >
+                          Carousel
+                        </a>
+                        <a class="dropdown-item" href="./lists.html" >
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./typography.html" >
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html" >
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html" >
+                          Markdown
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                          </div>
+                        </div>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Error pages
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./error-404.html" class="dropdown-item">
+                              404 page
+                            </a>
+                            <a href="./error-500.html" class="dropdown-item">
+                              500 page
+                            </a>
+                            <a href="./error-maintenance.html" class="dropdown-item">
+                              Maintenance page
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./activity.html" >
+                      Activity
+                    </a>
+                    <a class="dropdown-item" href="./gallery.html" >
+                      Gallery
+                    </a>
+                    <a class="dropdown-item" href="./invoice.html" >
+                      Invoice
+                    </a>
+                    <a class="dropdown-item" href="./search-results.html" >
+                      Search results
+                    </a>
+                    <a class="dropdown-item" href="./pricing.html" >
+                      Pricing cards
+                    </a>
+                    <a class="dropdown-item" href="./users.html" >
+                      Users
+                    </a>
+                    <a class="dropdown-item" href="./license.html" >
+                      License
+                    </a>
+                    <a class="dropdown-item" href="./music.html" >
+                      Music
+                    </a>
+                    <a class="dropdown-item" href="./uptime.html" >
+                      Uptime monitor
+                      <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                    </a>
+                    <a class="dropdown-item" href="./widgets.html" >
+                      Widgets
+                    </a>
+                    <a class="dropdown-item" href="./wizard.html" >
+                      Wizard
+                    </a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html" >
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html" >
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html" >
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html" >
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html" >
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html" >
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html" >
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html" >
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html" >
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html" >
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./icons.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      1518 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./docs/index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-text -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Documentation
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./changelog.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-plus -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="12" y1="11" x2="12" y2="17" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Changelog
+                    </span>
+                  </a>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/search -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                    </span>
+                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="page-wrapper">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header d-print-none">
+            <div class="row align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Activity
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="row justify-content-center">
+              <div class="col-8">
+                <div class="card">
+                  <div class="card-body">
+                    <div class="divide-y">
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar">JL</span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Jeffie Lewzey</strong> commented on your <strong>"I'm not a witch."</strong> post.
+                            </div>
+                            <div class="text-muted">yesterday</div>
+                          </div>
+                          <div class="col-auto align-self-center">
+                            <div class="badge bg-primary"></div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/002m.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              It's <strong>Mallory Hulme</strong>'s birthday. Wish him well!
+                            </div>
+                            <div class="text-muted">2 days ago</div>
+                          </div>
+                          <div class="col-auto align-self-center">
+                            <div class="badge bg-primary"></div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/003m.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Dunn Slane</strong> posted <strong>"Well, what do you want?"</strong>.
+                            </div>
+                            <div class="text-muted">today</div>
+                          </div>
+                          <div class="col-auto align-self-center">
+                            <div class="badge bg-primary"></div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/000f.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Emmy Levet</strong> created a new project <strong>Morning alarm clock</strong>.
+                            </div>
+                            <div class="text-muted">4 days ago</div>
+                          </div>
+                          <div class="col-auto align-self-center">
+                            <div class="badge bg-primary"></div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/001f.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Maryjo Lebarree</strong> liked your photo.
+                            </div>
+                            <div class="text-muted">2 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar">EP</span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Egan Poetz</strong> registered new client as <strong>Trilia</strong>.
+                            </div>
+                            <div class="text-muted">yesterday</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/002f.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Kellie Skingley</strong> closed a new deal on project <strong>Pen Pineapple Apple Pen</strong>.
+                            </div>
+                            <div class="text-muted">2 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/003f.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Christabel Charlwood</strong> created a new project for <strong>Wikibox</strong>.
+                            </div>
+                            <div class="text-muted">4 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar">HS</span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Haskel Shelper</strong> change status of <strong>Tabler Icons</strong> from <strong>open</strong> to <strong>closed</strong>.
+                            </div>
+                            <div class="text-muted">today</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/006m.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Lorry Mion</strong> liked <strong>Tabler UI Kit</strong>.
+                            </div>
+                            <div class="text-muted">yesterday</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Leesa Beaty</strong> posted new video.
+                            </div>
+                            <div class="text-muted">2 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/007m.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Perren Keemar</strong> and 3 others followed you.
+                            </div>
+                            <div class="text-muted">2 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar">SA</span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Sunny Airey</strong> upload 3 new photos to category <strong>Inspirations</strong>.
+                            </div>
+                            <div class="text-muted">2 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/009m.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Geoffry Flaunders</strong> made a <strong>$10</strong> donation.
+                            </div>
+                            <div class="text-muted">2 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/010m.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Thatcher Keel</strong> created a profile.
+                            </div>
+                            <div class="text-muted">3 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/005f.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Dyann Escala</strong> hosted the event <strong>Tabler UI Birthday</strong>.
+                            </div>
+                            <div class="text-muted">4 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar" style="background-image: url(./static/avatars/006f.jpg)"></span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Avivah Mugleston</strong> mentioned you on <strong>Best of 2020</strong>.
+                            </div>
+                            <div class="text-muted">2 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div class="row">
+                          <div class="col-auto">
+                            <span class="avatar">AA</span>
+                          </div>
+                          <div class="col">
+                            <div class="text-truncate">
+                              <strong>Arlie Armstead</strong> sent a Review Request to <strong>Amanda Blake</strong>.
+                            </div>
+                            <div class="text-muted">2 days ago</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                  <li class="list-inline-item">
+                    <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2022
+                    <a href="." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta7
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
+  </body>
+</html>

demo/all.html

@@ -1,588 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Index - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" 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>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="./index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" 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-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Index
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row row justify-content-center mt-3 mt-lg-5">
-            <div class="col-lg-6 col-xl-5">
-              <div class="card">
-                <div class="card-header">
-                  <h2 class="card-title">
-                    All pages
-                  </h2>
-                </div>
-                <div class="card-body">
-                  <ul>
-                    <li>
-                      <a href="/components/index.html">
-                        redirect.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/tmp.html">
-                        tmp.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layouts.html">
-                        layouts.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/redirects.json">
-                        redirects.json
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/blank.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Blank page
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/blog.html">
-                        Blog
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/buttons.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Buttons
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/calendar.html">
-                        Calendar
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/cards.html">
-                        Cards
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/carousel.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Carousel
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/changelog.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Changelog
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/charts.html">
-                        Charts
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/crypto-currencies.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Crypto currencies
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-header-dark.html">
-                        Dark header
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-dark-mode.html">
-                        Dark mode
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/docs.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Documentation
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/dropdowns.html">
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/email.html">
-                        Email
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/empty.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Empty page
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/flags.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Flags
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-navbar-folded.html">
-                        Folded sidebar
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/forgot-password.html">
-                        Forgot password
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/form-elements.html">
-                        Form elements
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/gallery.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Gallery
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/charts-heatmap.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Heatmap Charts
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/homepage.html">
-                        Homepage
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/icons.html">
-                        Icons
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/all.html">
-                        Index
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/invoice.html">
-                        Invoice
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-test.html">
-                        Layout test
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/login.html">
-                        Login
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/lookup.html">
-                        Lookup company
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/maintenance.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Maintenance mode
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/maps.html">
-                        Maps
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-navbar-top.html">
-                        Navbar top
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/404.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Page 404
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/pagination.html">
-                        Pagination
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/pricing.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Pricing cards
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/profile.html">
-                        Profile
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/rtl.html">
-                        RTL mode
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/register.html">
-                        Register
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/ribbons.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Ribbons
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-navbar-left.html">
-                        Sidebar left
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-navbar-right.html">
-                        Sidebar right
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-navbar-dark.html">
-                        Sidebar white
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/snippets.html">
-                        Snippets
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/social.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Social elements
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-header-sticky.html">
-                        Sticky header
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/store.html">
-                        Store
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/components.html">
-                        Table UI components
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/tabs.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Tabs
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/typography.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Typography
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/users.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                        Users list
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-    <script>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
-    <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-    <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
-    <!-- Tabler Plugins -->
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
-  </body>
-</html>

demo/auth-lock.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta7
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Forgot password - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+  </head>
+  <body  class=" border-top-wide border-primary d-flex flex-column">
+    <div class="page page-center">
+      <div class="container-tight py-4">
+        <div class="text-center mb-4">
+          <a href="." class="navbar-brand navbar-brand-autodark"><img src="./static/logo.svg" height="36" alt=""></a>
+        </div>
+        <form class="card card-md" action="." method="get" autocomplete="off">
+          <div class="card-body text-center">
+            <div class="mb-4">
+              <h2 class="card-title">Account Locked</h2>
+              <p class="text-muted">Please enter your password to unlock your account</p>
+            </div>
+            <div class="mb-4">
+              <span class="avatar avatar-xl mb-3" style="background-image: url(./static/avatars/000m.jpg)"></span>
+              <h3>Paweł Kuna</h3>
+            </div>
+            <div class="mb-4">
+              <input type="password" class="form-control" placeholder="Password&hellip;">
+            </div>
+            <div>
+              <a href="#" class="btn btn-primary w-100">
+                <!-- Download SVG icon from http://tabler-icons.io/i/lock-open -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="5" y="11" width="14" height="10" rx="2" /><circle cx="12" cy="16" r="1" /><path d="M8 11v-5a4 4 0 0 1 8 0" /></svg>
+                Unlock
+              </a>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
+  </body>
+</html>

demo/blank.html

@@ -1,295 +1,535 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* @version 1.0.0-beta7
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Blank page - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" 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>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
+  <body >
+    <div class="page">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item d-none d-md-flex me-3">
+              <div class="btn-list">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  Source code
                 </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                  Sponsor
                 </a>
               </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="./index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" 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-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <div class="empty">
-            <div class="empty-icon">
-              <img src="./img/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
+            <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
               </a>
+              <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+              </a>
+              <div class="nav-item dropdown d-none d-md-flex me-3">
+                <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                  <span class="badge bg-red"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Last updates</h3>
+                    </div>
+                    <div class="list-group list-group-flush list-group-hoverable">
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 1</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              Change deprecated html tags to text decoration classes (#29604)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 2</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              justify-content:between ⇒ justify-content:space-between (#29734)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions show">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 3</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              Update change-version.js (#29736)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 4</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              Regenerate package-lock.json (#29730)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Set status</a>
+                <a href="#" class="dropdown-item">Profile & account</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" class="dropdown-item">Settings</a>
+                <a href="#" class="dropdown-item">Logout</a>
+              </div>
             </div>
           </div>
-        </main>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="./index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item active dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html" >
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./accordion.html" >
+                          Accordion
+                        </a>
+                        <a class="dropdown-item active" href="./blank.html" >
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html" >
+                          Buttons
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Cards
+                            <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./cards.html" class="dropdown-item">
+                              Sample cards
+                            </a>
+                            <a href="./card-actions.html" class="dropdown-item">
+                              Card actions
+                              <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                            </a>
+                            <a href="./cards-masonry.html" class="dropdown-item">
+                              Cards Masonry
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./colors.html" >
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="./dropdowns.html" >
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="./modals.html" >
+                          Modals
+                        </a>
+                        <a class="dropdown-item" href="./maps.html" >
+                          Maps
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html" >
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html" >
+                          Vector maps
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html" >
+                          Navigation
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./charts.html" >
+                          Charts
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html" >
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html" >
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html" >
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tables.html" >
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./carousel.html" >
+                          Carousel
+                        </a>
+                        <a class="dropdown-item" href="./lists.html" >
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./typography.html" >
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html" >
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html" >
+                          Markdown
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                          </div>
+                        </div>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Error pages
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./error-404.html" class="dropdown-item">
+                              404 page
+                            </a>
+                            <a href="./error-500.html" class="dropdown-item">
+                              500 page
+                            </a>
+                            <a href="./error-maintenance.html" class="dropdown-item">
+                              Maintenance page
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./activity.html" >
+                      Activity
+                    </a>
+                    <a class="dropdown-item" href="./gallery.html" >
+                      Gallery
+                    </a>
+                    <a class="dropdown-item" href="./invoice.html" >
+                      Invoice
+                    </a>
+                    <a class="dropdown-item" href="./search-results.html" >
+                      Search results
+                    </a>
+                    <a class="dropdown-item" href="./pricing.html" >
+                      Pricing cards
+                    </a>
+                    <a class="dropdown-item" href="./users.html" >
+                      Users
+                    </a>
+                    <a class="dropdown-item" href="./license.html" >
+                      License
+                    </a>
+                    <a class="dropdown-item" href="./music.html" >
+                      Music
+                    </a>
+                    <a class="dropdown-item" href="./uptime.html" >
+                      Uptime monitor
+                      <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                    </a>
+                    <a class="dropdown-item" href="./widgets.html" >
+                      Widgets
+                    </a>
+                    <a class="dropdown-item" href="./wizard.html" >
+                      Wizard
+                    </a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html" >
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html" >
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html" >
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html" >
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html" >
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html" >
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html" >
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html" >
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html" >
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html" >
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./icons.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      1518 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./docs/index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-text -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Documentation
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./changelog.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-plus -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="12" y1="11" x2="12" y2="17" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Changelog
+                    </span>
+                  </a>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/search -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                    </span>
+                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="page-wrapper">
+        <div class="container-xl">
+        </div>
+        <div class="page-body">
+          <div class="container-xl d-flex flex-column justify-content-center">
+            <div class="empty">
+              <div class="empty-img"><img src="./static/illustrations/undraw_printing_invoices_5r4r.svg" height="128"  alt="">
+              </div>
+              <p class="empty-title">No results found</p>
+              <p class="empty-subtitle text-muted">
+                Try adjusting your search or filter to find what you're looking for.
+              </p>
+              <div class="empty-action">
+                <a href="./." class="btn btn-primary">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
+                  Add your first client
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                  <li class="list-inline-item">
+                    <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2022
+                    <a href="." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta7
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
       </div>
     </div>
-    <script>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
     <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
     <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
-    <!-- Tabler Plugins -->
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
+    <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
   </body>
 </html>

demo/blog.html

@@ -1,537 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Blog - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" 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>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="./index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" 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-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  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="./img/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(./img/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="./img/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(./img/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="./img/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(./img/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(./img/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(./img/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="./img/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(./img/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="./img/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(./img/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="./img/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(./img/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="./img/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(./img/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>
-        </main>
-      </div>
-    </div>
-    <script>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
-    <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-    <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
-    <!-- Tabler Plugins -->
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
-  </body>
-</html>

demo/calendar.html

@@ -1,379 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Calendar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" 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>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="./index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" 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-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item active">
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Calendar
-                </h2>
-              </div>
-              <!-- Page title actions -->
-              <div class="col-auto ml-auto">
-                <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>
-        </main>
-      </div>
-    </div>
-    <script>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
-    <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-    <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
-    <!-- Tabler Plugins -->
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></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>
-      document.body.style.display = 'block';
-    </script>
-  </body>
-</html>

demo/card-actions.html

@@ -0,0 +1,740 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta7
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Card actions - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+  </head>
+  <body >
+    <div class="page">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item d-none d-md-flex me-3">
+              <div class="btn-list">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  Source code
+                </a>
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                  Sponsor
+                </a>
+              </div>
+            </div>
+            <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+              </a>
+              <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+              </a>
+              <div class="nav-item dropdown d-none d-md-flex me-3">
+                <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                  <span class="badge bg-red"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Last updates</h3>
+                    </div>
+                    <div class="list-group list-group-flush list-group-hoverable">
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 1</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              Change deprecated html tags to text decoration classes (#29604)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 2</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              justify-content:between ⇒ justify-content:space-between (#29734)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions show">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 3</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              Update change-version.js (#29736)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 4</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              Regenerate package-lock.json (#29730)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Set status</a>
+                <a href="#" class="dropdown-item">Profile & account</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" class="dropdown-item">Settings</a>
+                <a href="#" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="./index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item active dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html" >
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./accordion.html" >
+                          Accordion
+                        </a>
+                        <a class="dropdown-item" href="./blank.html" >
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html" >
+                          Buttons
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Cards
+                            <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./cards.html" class="dropdown-item">
+                              Sample cards
+                            </a>
+                            <a href="./card-actions.html" class="dropdown-item">
+                              Card actions
+                              <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                            </a>
+                            <a href="./cards-masonry.html" class="dropdown-item">
+                              Cards Masonry
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./colors.html" >
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="./dropdowns.html" >
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="./modals.html" >
+                          Modals
+                        </a>
+                        <a class="dropdown-item" href="./maps.html" >
+                          Maps
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html" >
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html" >
+                          Vector maps
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html" >
+                          Navigation
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./charts.html" >
+                          Charts
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html" >
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html" >
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html" >
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tables.html" >
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./carousel.html" >
+                          Carousel
+                        </a>
+                        <a class="dropdown-item" href="./lists.html" >
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./typography.html" >
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html" >
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html" >
+                          Markdown
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                          </div>
+                        </div>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Error pages
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./error-404.html" class="dropdown-item">
+                              404 page
+                            </a>
+                            <a href="./error-500.html" class="dropdown-item">
+                              500 page
+                            </a>
+                            <a href="./error-maintenance.html" class="dropdown-item">
+                              Maintenance page
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./activity.html" >
+                      Activity
+                    </a>
+                    <a class="dropdown-item" href="./gallery.html" >
+                      Gallery
+                    </a>
+                    <a class="dropdown-item" href="./invoice.html" >
+                      Invoice
+                    </a>
+                    <a class="dropdown-item" href="./search-results.html" >
+                      Search results
+                    </a>
+                    <a class="dropdown-item" href="./pricing.html" >
+                      Pricing cards
+                    </a>
+                    <a class="dropdown-item" href="./users.html" >
+                      Users
+                    </a>
+                    <a class="dropdown-item" href="./license.html" >
+                      License
+                    </a>
+                    <a class="dropdown-item" href="./music.html" >
+                      Music
+                    </a>
+                    <a class="dropdown-item" href="./uptime.html" >
+                      Uptime monitor
+                      <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                    </a>
+                    <a class="dropdown-item" href="./widgets.html" >
+                      Widgets
+                    </a>
+                    <a class="dropdown-item" href="./wizard.html" >
+                      Wizard
+                    </a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html" >
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html" >
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html" >
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html" >
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html" >
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html" >
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html" >
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html" >
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html" >
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html" >
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./icons.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      1518 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./docs/index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-text -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Documentation
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./changelog.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-plus -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="12" y1="11" x2="12" y2="17" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Changelog
+                    </span>
+                  </a>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/search -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                    </span>
+                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="page-wrapper">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header d-print-none">
+            <div class="row align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Card actions
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="row row-cards">
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Sample card</h3>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="199" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Card with action</h3>
+                    <div class="card-actions">
+                      <a href="#" class="btn btn-primary">
+                        <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
+                        Add new
+                      </a>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="199" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Cart title</h3>
+                    <div class="card-actions">
+                      <a href="#" class="btn">
+                        <!-- Download SVG icon from http://tabler-icons.io/i/phone -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" /></svg>
+                        Phone
+                      </a>
+                      <a href="#" class="btn">
+                        <!-- Download SVG icon from http://tabler-icons.io/i/mail -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="3" y="5" width="18" height="14" rx="2" /><polyline points="3 7 12 13 21 7" /></svg>
+                        Email
+                      </a>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="199" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <div>
+                      <div class="row align-items-center">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="card-title">Paweł Kuna</div>
+                          <div class="card-subtitle">UI Designer</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="card-actions">
+                      <a href="#" class="btn">
+                        <!-- Download SVG icon from http://tabler-icons.io/i/phone -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" /></svg>
+                        Phone
+                      </a>
+                      <a href="#" class="btn">
+                        <!-- Download SVG icon from http://tabler-icons.io/i/mail -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="3" y="5" width="18" height="14" rx="2" /><polyline points="3 7 12 13 21 7" /></svg>
+                        Email
+                      </a>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="199" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <div>
+                      <h3 class="card-title">
+                        With description
+                      </h3>
+                      <p class="card-subtitle">
+                        Lorem ipsum dolor sit amet consectetur adipisicing.
+                      </p>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="199" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <div>
+                      <h3 class="card-title">
+                        With description and action
+                      </h3>
+                      <p class="card-subtitle">
+                        Lorem ipsum dolor sit amet consectetur adipisicing.
+                      </p>
+                    </div>
+                    <div class="card-actions">
+                      <a href="#" class="btn btn-primary">
+                        Create new job
+                      </a>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="199" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <div>
+                      <div class="row align-items-center">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/003m.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="card-title">Dunn Slane</div>
+                          <div class="card-subtitle">Research Nurse</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="card-actions">
+                      <div class="dropdown">
+                        <a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><!-- Download SVG icon from http://tabler-icons.io/i/dots-vertical -->
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="1" /><circle cx="12" cy="19" r="1" /><circle cx="12" cy="5" r="1" /></svg>
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-end">
+                          <a class="dropdown-item" href="#">Edit user</a>
+                          <a class="dropdown-item" href="#">Change permissions</a>
+                          <a class="dropdown-item text-danger" href="#">Delete user</a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="199" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Card actions</h3>
+                    <div class="card-actions btn-actions">
+                      <a href="#" class="btn-action" ><!-- Download SVG icon from http://tabler-icons.io/i/refresh -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" /><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" /></svg>
+                      </a>
+                      <a href="#" class="btn-action" ><!-- Download SVG icon from http://tabler-icons.io/i/chevron-up -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="6 15 12 9 18 15" /></svg>
+                      </a>
+                      <a href="#" class="btn-action" ><!-- Download SVG icon from http://tabler-icons.io/i/dots-vertical -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="1" /><circle cx="12" cy="19" r="1" /><circle cx="12" cy="5" r="1" /></svg>
+                      </a>
+                      <a href="#" class="btn-action" ><!-- Download SVG icon from http://tabler-icons.io/i/x -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
+                      </a>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="199" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                  <li class="list-inline-item">
+                    <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2022
+                    <a href="." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta7
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
+  </body>
+</html>

demo/cards-masonry.html

@@ -0,0 +1,687 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta7
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Cards Masonry - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+  </head>
+  <body >
+    <div class="page">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item d-none d-md-flex me-3">
+              <div class="btn-list">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  Source code
+                </a>
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                  Sponsor
+                </a>
+              </div>
+            </div>
+            <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+              </a>
+              <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+              </a>
+              <div class="nav-item dropdown d-none d-md-flex me-3">
+                <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                  <span class="badge bg-red"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Last updates</h3>
+                    </div>
+                    <div class="list-group list-group-flush list-group-hoverable">
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 1</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              Change deprecated html tags to text decoration classes (#29604)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 2</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              justify-content:between ⇒ justify-content:space-between (#29734)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions show">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 3</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              Update change-version.js (#29736)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 4</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              Regenerate package-lock.json (#29730)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Set status</a>
+                <a href="#" class="dropdown-item">Profile & account</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" class="dropdown-item">Settings</a>
+                <a href="#" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="./index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item active dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html" >
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./accordion.html" >
+                          Accordion
+                        </a>
+                        <a class="dropdown-item" href="./blank.html" >
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html" >
+                          Buttons
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Cards
+                            <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./cards.html" class="dropdown-item">
+                              Sample cards
+                            </a>
+                            <a href="./card-actions.html" class="dropdown-item">
+                              Card actions
+                              <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                            </a>
+                            <a href="./cards-masonry.html" class="dropdown-item">
+                              Cards Masonry
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./colors.html" >
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="./dropdowns.html" >
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="./modals.html" >
+                          Modals
+                        </a>
+                        <a class="dropdown-item" href="./maps.html" >
+                          Maps
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html" >
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html" >
+                          Vector maps
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html" >
+                          Navigation
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./charts.html" >
+                          Charts
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html" >
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html" >
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html" >
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tables.html" >
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./carousel.html" >
+                          Carousel
+                        </a>
+                        <a class="dropdown-item" href="./lists.html" >
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./typography.html" >
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html" >
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html" >
+                          Markdown
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                          </div>
+                        </div>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Error pages
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./error-404.html" class="dropdown-item">
+                              404 page
+                            </a>
+                            <a href="./error-500.html" class="dropdown-item">
+                              500 page
+                            </a>
+                            <a href="./error-maintenance.html" class="dropdown-item">
+                              Maintenance page
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./activity.html" >
+                      Activity
+                    </a>
+                    <a class="dropdown-item" href="./gallery.html" >
+                      Gallery
+                    </a>
+                    <a class="dropdown-item" href="./invoice.html" >
+                      Invoice
+                    </a>
+                    <a class="dropdown-item" href="./search-results.html" >
+                      Search results
+                    </a>
+                    <a class="dropdown-item" href="./pricing.html" >
+                      Pricing cards
+                    </a>
+                    <a class="dropdown-item" href="./users.html" >
+                      Users
+                    </a>
+                    <a class="dropdown-item" href="./license.html" >
+                      License
+                    </a>
+                    <a class="dropdown-item" href="./music.html" >
+                      Music
+                    </a>
+                    <a class="dropdown-item" href="./uptime.html" >
+                      Uptime monitor
+                      <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                    </a>
+                    <a class="dropdown-item" href="./widgets.html" >
+                      Widgets
+                    </a>
+                    <a class="dropdown-item" href="./wizard.html" >
+                      Wizard
+                    </a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html" >
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html" >
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html" >
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html" >
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html" >
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html" >
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html" >
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html" >
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html" >
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html" >
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./icons.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      1518 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./docs/index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-text -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Documentation
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./changelog.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-plus -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="12" y1="11" x2="12" y2="17" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Changelog
+                    </span>
+                  </a>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/search -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                    </span>
+                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="page-wrapper">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header d-print-none">
+            <div class="row align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Cards Masonry
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="row row-cards" data-masonry='{"percentPosition": true }'>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="199" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="150" viewBox="0 0 400 150" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="149" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="150"></line>
+                      <line x1="0" y1="150" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="400" viewBox="0 0 400 400" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="399" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="400"></line>
+                      <line x1="0" y1="400" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="300" viewBox="0 0 400 300" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="299" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="300"></line>
+                      <line x1="0" y1="300" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="350" viewBox="0 0 400 350" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="349" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="350"></line>
+                      <line x1="0" y1="350" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="600" viewBox="0 0 400 600" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="599" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="600"></line>
+                      <line x1="0" y1="600" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="700" viewBox="0 0 400 700" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="699" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="700"></line>
+                      <line x1="0" y1="700" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="199" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="150" viewBox="0 0 400 150" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="149" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="150"></line>
+                      <line x1="0" y1="150" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="250" viewBox="0 0 400 250" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="249" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="250"></line>
+                      <line x1="0" y1="250" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="50" viewBox="0 0 400 50" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="49" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="50"></line>
+                      <line x1="0" y1="50" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="400" viewBox="0 0 400 400" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="399" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="400"></line>
+                      <line x1="0" y1="400" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="300" viewBox="0 0 400 300" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="299" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="300"></line>
+                      <line x1="0" y1="300" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" stroke="var(--tblr-border-color, #b8cef1)">
+                      <!--	<rect x=".5" y=".5" width="399" height="199" fill="#fff" rx="2"></rect>-->
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                  <li class="list-inline-item">
+                    <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2022
+                    <a href="." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta7
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
+  </body>
+</html>

demo/charts-heatmap.html

@@ -1,523 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Heatmap Charts - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" 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>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="./index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" 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-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  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>
-        </main>
-      </div>
-    </div>
-    <script>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
-    <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-    <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
-    <!-- Tabler Plugins -->
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
-  </body>
-</html>

demo/colors.html

@@ -0,0 +1,830 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta7
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Colors - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+  </head>
+  <body >
+    <div class="page">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item d-none d-md-flex me-3">
+              <div class="btn-list">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  Source code
+                </a>
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                  Sponsor
+                </a>
+              </div>
+            </div>
+            <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+              </a>
+              <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+              </a>
+              <div class="nav-item dropdown d-none d-md-flex me-3">
+                <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                  <span class="badge bg-red"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Last updates</h3>
+                    </div>
+                    <div class="list-group list-group-flush list-group-hoverable">
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 1</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              Change deprecated html tags to text decoration classes (#29604)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 2</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              justify-content:between ⇒ justify-content:space-between (#29734)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions show">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 3</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              Update change-version.js (#29736)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
+                          <div class="col text-truncate">
+                            <a href="#" class="text-body d-block">Example 4</a>
+                            <div class="d-block text-muted text-truncate mt-n1">
+                              Regenerate package-lock.json (#29730)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Set status</a>
+                <a href="#" class="dropdown-item">Profile & account</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" class="dropdown-item">Settings</a>
+                <a href="#" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="./index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html" >
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./accordion.html" >
+                          Accordion
+                        </a>
+                        <a class="dropdown-item" href="./blank.html" >
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html" >
+                          Buttons
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Cards
+                            <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./cards.html" class="dropdown-item">
+                              Sample cards
+                            </a>
+                            <a href="./card-actions.html" class="dropdown-item">
+                              Card actions
+                              <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                            </a>
+                            <a href="./cards-masonry.html" class="dropdown-item">
+                              Cards Masonry
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./colors.html" >
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="./dropdowns.html" >
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="./modals.html" >
+                          Modals
+                        </a>
+                        <a class="dropdown-item" href="./maps.html" >
+                          Maps
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html" >
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html" >
+                          Vector maps
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html" >
+                          Navigation
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./charts.html" >
+                          Charts
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html" >
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html" >
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html" >
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tables.html" >
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./carousel.html" >
+                          Carousel
+                        </a>
+                        <a class="dropdown-item" href="./lists.html" >
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./typography.html" >
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html" >
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html" >
+                          Markdown
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                          </div>
+                        </div>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Error pages
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./error-404.html" class="dropdown-item">
+                              404 page
+                            </a>
+                            <a href="./error-500.html" class="dropdown-item">
+                              500 page
+                            </a>
+                            <a href="./error-maintenance.html" class="dropdown-item">
+                              Maintenance page
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./activity.html" >
+                      Activity
+                    </a>
+                    <a class="dropdown-item" href="./gallery.html" >
+                      Gallery
+                    </a>
+                    <a class="dropdown-item" href="./invoice.html" >
+                      Invoice
+                    </a>
+                    <a class="dropdown-item" href="./search-results.html" >
+                      Search results
+                    </a>
+                    <a class="dropdown-item" href="./pricing.html" >
+                      Pricing cards
+                    </a>
+                    <a class="dropdown-item" href="./users.html" >
+                      Users
+                    </a>
+                    <a class="dropdown-item" href="./license.html" >
+                      License
+                    </a>
+                    <a class="dropdown-item" href="./music.html" >
+                      Music
+                    </a>
+                    <a class="dropdown-item" href="./uptime.html" >
+                      Uptime monitor
+                      <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                    </a>
+                    <a class="dropdown-item" href="./widgets.html" >
+                      Widgets
+                    </a>
+                    <a class="dropdown-item" href="./wizard.html" >
+                      Wizard
+                    </a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html" >
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html" >
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html" >
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html" >
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html" >
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html" >
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html" >
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html" >
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html" >
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html" >
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./icons.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      1518 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./docs/index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-text -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Documentation
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./changelog.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-plus -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="12" y1="11" x2="12" y2="17" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Changelog
+                    </span>
+                  </a>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/search -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                    </span>
+                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="page-wrapper">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header d-print-none">
+            <div class="row align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Colors
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="card">
+              <div class="card-body">
+                <div class="table-responsive">
+                  <table class="table text-center">
+                    <tr>
+                      <td>
+                        <div class="avatar text-white bg-blue" data-demo-color>bl
+                        </div>
+                      </td>
+                      <td>
+                        <div class="avatar text-white bg-azure" data-demo-color>az
+                        </div>
+                      </td>
+                      <td>
+                        <div class="avatar text-white bg-indigo" data-demo-color>in
+                        </div>
+                      </td>
+                      <td>
+                        <div class="avatar text-white bg-purple" data-demo-color>pu
+                        </div>
+                      </td>
+                      <td>
+                        <div class="avatar text-white bg-pink" data-demo-color>pi
+                        </div>
+                      </td>
+                      <td>
+                        <div class="avatar text-white bg-red" data-demo-color>re
+                        </div>
+                      </td>
+                      <td>
+                        <div class="avatar text-white bg-orange" data-demo-color>or
+                        </div>
+                      </td>
+                      <td>
+                        <div class="avatar text-white bg-yellow" data-demo-color>ye
+                        </div>
+                      </td>
+                      <td>
+                        <div class="avatar text-white bg-lime" data-demo-color>li
+                        </div>
+                      </td>
+                      <td>
+                        <div class="avatar text-white bg-green" data-demo-color>gr
+                        </div>
+                      </td>
+                      <td>
+                        <div class="avatar text-white bg-teal" data-demo-color>te
+                        </div>
+                      </td>
+                      <td>
+                        <div class="avatar text-white bg-cyan" data-demo-color>cy
+                        </div>
+                      </td>
+                      <td>
+                        <div class="avatar text-white bg-dark" data-demo-color>da
+                        </div>
+                      </td>
+                      <td>
+                        <div class="avatar text-white bg-muted" data-demo-color>mu
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <div class="avatar bg-blue-lt" data-demo-color>bl</div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-azure-lt" data-demo-color>az</div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-indigo-lt" data-demo-color>in</div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-purple-lt" data-demo-color>pu</div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-pink-lt" data-demo-color>pi</div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-red-lt" data-demo-color>re</div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-orange-lt" data-demo-color>or</div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-yellow-lt" data-demo-color>ye</div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-lime-lt" data-demo-color>li</div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-green-lt" data-demo-color>gr</div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-teal-lt" data-demo-color>te</div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-cyan-lt" data-demo-color>cy</div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-dark-lt" data-demo-color>da</div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-muted-lt" data-demo-color>mu</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <div class="avatar text-blue bg-white" data-demo-color>bl</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-azure bg-white" data-demo-color>az</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-indigo bg-white" data-demo-color>in</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-purple bg-white" data-demo-color>pu</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-pink bg-white" data-demo-color>pi</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-red bg-white" data-demo-color>re</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-orange bg-white" data-demo-color>or</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-yellow bg-white" data-demo-color>ye</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-lime bg-white" data-demo-color>li</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-green bg-white" data-demo-color>gr</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-teal bg-white" data-demo-color>te</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-cyan bg-white" data-demo-color>cy</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-dark bg-white" data-demo-color>da</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-muted bg-white" data-demo-color>mu</div>
+                      </td>
+                    </tr>
+                    <tr class="bg-light">
+                      <td>
+                        <div class="avatar text-blue bg-light" data-demo-color>bl</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-azure bg-light" data-demo-color>az</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-indigo bg-light" data-demo-color>in</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-purple bg-light" data-demo-color>pu</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-pink bg-light" data-demo-color>pi</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-red bg-light" data-demo-color>re</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-orange bg-light" data-demo-color>or</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-yellow bg-light" data-demo-color>ye</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-lime bg-light" data-demo-color>li</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-green bg-light" data-demo-color>gr</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-teal bg-light" data-demo-color>te</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-cyan bg-light" data-demo-color>cy</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-dark bg-light" data-demo-color>da</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-muted bg-light" data-demo-color>mu</div>
+                      </td>
+                    </tr>
+                    <tr class="bg-dark text-white">
+                      <td>
+                        <div class="avatar text-blue bg-dark" data-demo-color>bl</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-azure bg-dark" data-demo-color>az</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-indigo bg-dark" data-demo-color>in</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-purple bg-dark" data-demo-color>pu</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-pink bg-dark" data-demo-color>pi</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-red bg-dark" data-demo-color>re</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-orange bg-dark" data-demo-color>or</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-yellow bg-dark" data-demo-color>ye</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-lime bg-dark" data-demo-color>li</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-green bg-dark" data-demo-color>gr</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-teal bg-dark" data-demo-color>te</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-cyan bg-dark" data-demo-color>cy</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-white bg-dark" data-demo-color>wh</div>
+                      </td>
+                      <td>
+                        <div class="avatar text-muted bg-dark" data-demo-color>mu</div>
+                      </td>
+                    </tr>
+                    <tr class="bg-dark text-white">
+                      <td>
+                        <div class="avatar bg-blue-lt" data-demo-color>bl</div>
+                        <div class="mt-2" data-demo-color-contrast></div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-azure-lt" data-demo-color>az</div>
+                        <div class="mt-2" data-demo-color-contrast></div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-indigo-lt" data-demo-color>in</div>
+                        <div class="mt-2" data-demo-color-contrast></div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-purple-lt" data-demo-color>pu</div>
+                        <div class="mt-2" data-demo-color-contrast></div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-pink-lt" data-demo-color>pi</div>
+                        <div class="mt-2" data-demo-color-contrast></div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-red-lt" data-demo-color>re</div>
+                        <div class="mt-2" data-demo-color-contrast></div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-orange-lt" data-demo-color>or</div>
+                        <div class="mt-2" data-demo-color-contrast></div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-yellow-lt" data-demo-color>ye</div>
+                        <div class="mt-2" data-demo-color-contrast></div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-lime-lt" data-demo-color>li</div>
+                        <div class="mt-2" data-demo-color-contrast></div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-green-lt" data-demo-color>gr</div>
+                        <div class="mt-2" data-demo-color-contrast></div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-teal-lt" data-demo-color>te</div>
+                        <div class="mt-2" data-demo-color-contrast></div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-cyan-lt" data-demo-color>cy</div>
+                        <div class="mt-2" data-demo-color-contrast></div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-white-lt" data-demo-color>wh</div>
+                        <div class="mt-2" data-demo-color-contrast></div>
+                      </td>
+                      <td>
+                        <div class="avatar bg-muted-lt" data-demo-color>mu</div>
+                        <div class="mt-2" data-demo-color-contrast></div>
+                      </td>
+                    </tr>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                  <li class="list-inline-item">
+                    <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                      Sponsor
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2022
+                    <a href="." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta7
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
+  </body>
+</html>

demo/components.html

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

demo/components/card-buttons.html

@@ -1,395 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Card with footer buttons - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
-    <meta name="twitter:site" content="@tabler_ui">
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
-    <meta property="og:image:width" content="1280">
-    <meta property="og:image:height" content="640">
-    <meta property="og:site_name" content="Tabler">
-    <meta property="og:type" content="object">
-    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
-    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" 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>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="../index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" 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-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Tabler components
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-lg-3">
-              <div class="list-group list-group-transparent mb-0">
-                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action active">Card with footer buttons</a>
-                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-              </div>
-            </div>
-            <div class="col-lg-9">
-              <div class="card">
-                <div class="card-body p-6">
-                  <div class="card-title">Card with footer buttons</div>
-                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                      <div class="flex-fill" style="max-width: 572px">
-                        <div class="card">
-                          <div class="card-body">
-                            <h3 class="card-title">Card with footer buttons</h3>
-                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                              neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                          </div>
-                          <!-- Card footer -->
-                          <div class="card-footer">
-                            <div class="d-flex">
-                              <a href="#" class="btn btn-link">Cancel</a>
-                              <a href="#" class="btn btn-primary ml-auto">Go somewhere</a>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card with footer buttons<span class="nt">&lt;/h3&gt;</span>
-      <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-         neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="c">&lt;!-- Card footer --&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
-         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary ml-auto"</span><span class="nt">&gt;</span>Go somewhere<span class="nt">&lt;/a&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                  </div>
-                  <div class="row">
-                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                        Copy code
-                      </a>
-                    </div>
-                    <div class="col">
-                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                        <input type="hidden" name="data" value='{"title":"Card with footer buttons","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
-                        <div class=\"card\">\n      
-                          <div class=\"card-body\">\n         
-                            <h3 class=\"card-title\">Card with footer buttons</h3>
-                            \n         
-                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima\n            neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                            \n      </div>
-                          \n      <!-- Card footer -->\n      
-                          <div class=\"card-footer\">\n         
-                            <div class=\"d-flex\">\n            <a href=\"#\" class=\"btn btn-link\">Cancel</a>\n            <a href=\"#\" class=\"btn btn-primary ml-auto\">Go somewhere</a>\n         </div>
-                            \n      </div>
-                          \n</div>
-                        \n\n\n</div>
-                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                      <button type="submit" class="btn btn-primary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                        Edit in CodePen
-                      </button>
-                    </form>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  </div>
-  <script>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
-  <!-- Tabler Plugins -->
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
-</body>
-</html>

demo/components/card-comments.html

@@ -1,605 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Comments card - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-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?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" 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>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="../index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" 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-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Tabler components
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-lg-3">
-              <div class="list-group list-group-transparent mb-0">
-                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                <a href="/components/card-comments.html" class="list-group-item list-group-item-action active">Comments card</a>
-                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-              </div>
-            </div>
-            <div class="col-lg-9">
-              <div class="card">
-                <div class="card-body p-6">
-                  <div class="card-title">Comments card</div>
-                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                      <div class="flex-fill" style="max-width: 572px">
-                        <div class="card">
-                          <div class="card-header">
-                            <div class="card-title">Comments</div>
-                          </div>
-                          <div class="card-body">
-                            <div class="d-flex mb-5">
-                              <div class="mr-4">
-                                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)">
-                                  <span class="badge bg-green"></span>
-                                </span>
-                              </div>
-                              <div class="flex-fill">
-                                <div class="d-flex mt-n1">
-                                  <h5 class="m-0">
-                                    Paweł Kuna
-                                  </h5>
-                                  <div class="ml-auto small text-muted">1 week ago</div>
-                                </div>
-                                <p class="mb-2">
-                                  This is PERFECT
-                                </p>
-                                <div class="small">
-                                  <span class="text-success mr-1">+47</span>
-                                  <a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="18 15 12 9 6 15"></polyline></svg>
-                                  </a>
-                                  <a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
-                                  </a>
-                                  <span class="mr-1">·</span>
-                                  <a href="#" class="mr-1 text-muted">Reply</a>
-                                  <span class="mr-1">·</span>
-                                  <a href="#" class="text-muted">Edit</a>
-                                </div>
-                              </div>
-                            </div>
-                            <div class="d-flex mb-5">
-                              <div class="mr-4">
-                                <span class="avatar">
-                                  <span class="badge bg-green"></span>
-                                  JL</span>
-                              </div>
-                              <div class="flex-fill">
-                                <div class="d-flex mt-n1">
-                                  <h5 class="m-0">
-                                    Jeffie Lewzey
-                                  </h5>
-                                  <div class="ml-auto small text-muted">1 week and 4 days ago</div>
-                                </div>
-                                <p class="mb-2">
-                                  She is so damn beautiful OMG i love her!!! does somebody knows what kind of music is this? sorry xD
-                                </p>
-                                <div class="small">
-                                  <span class="text-success mr-1">+45</span>
-                                  <a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="18 15 12 9 6 15"></polyline></svg>
-                                  </a>
-                                  <a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
-                                  </a>
-                                  <span class="mr-1">·</span>
-                                  <a href="#" class="mr-1 text-muted">Reply</a>
-                                  <span class="mr-1">·</span>
-                                  <a href="#" class="text-muted">Edit</a>
-                                </div>
-                              </div>
-                            </div>
-                            <div class="d-flex">
-                              <div class="mr-4">
-                                <span class="avatar" style="background-image: url(../img/avatars/002m.jpg)">
-                                  <span class="badge bg-green"></span>
-                                </span>
-                              </div>
-                              <div class="flex-fill">
-                                <div class="d-flex mt-n1">
-                                  <h5 class="m-0">
-                                    Mallory Hulme
-                                  </h5>
-                                  <div class="ml-auto small text-muted">2 days ago</div>
-                                </div>
-                                <p class="mb-2">
-                                  Did anyone go camping in Oshkosh Wisconsin last month?
-                                </p>
-                                <div class="small">
-                                  <span class="text-success mr-1">+32</span>
-                                  <a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="18 15 12 9 6 15"></polyline></svg>
-                                  </a>
-                                  <a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
-                                  </a>
-                                  <span class="mr-1">·</span>
-                                  <a href="#" class="mr-1 text-muted">Reply</a>
-                                  <span class="mr-1">·</span>
-                                  <a href="#" class="text-muted">Edit</a>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Comments<span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-5"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-4"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/000m.jpg)"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex-fill"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mt-n1"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"m-0"</span><span class="nt">&gt;</span>
-                  Paweł Kuna
-               <span class="nt">&lt;/h5&gt;</span>
-               <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto small text-muted"</span><span class="nt">&gt;</span>1 week ago<span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
-               This is PERFECT
-            <span class="nt">&lt;/p&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"small"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-success mr-1"</span><span class="nt">&gt;</span>+47<span class="nt">&lt;/span&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Vote Up"</span><span class="nt">&gt;&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"18 15 12 9 6 15"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
-               <span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"mr-1"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Vote Down"</span><span class="nt">&gt;</span>
-                  <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"6 9 12 15 18 9"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
-               <span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-1"</span><span class="nt">&gt;</span>·<span class="nt">&lt;/span&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"mr-1 text-muted"</span><span class="nt">&gt;</span>Reply<span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-1"</span><span class="nt">&gt;</span>·<span class="nt">&lt;/span&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Edit<span class="nt">&lt;/a&gt;</span>
-            <span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-5"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-4"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
-               JL<span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex-fill"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mt-n1"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"m-0"</span><span class="nt">&gt;</span>
-                  Jeffie Lewzey
-               <span class="nt">&lt;/h5&gt;</span>
-               <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto small text-muted"</span><span class="nt">&gt;</span>1 week and 4 days ago<span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
-               She is so damn beautiful OMG i love her!!! does somebody knows what kind of music is this? sorry xD
-            <span class="nt">&lt;/p&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"small"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-success mr-1"</span><span class="nt">&gt;</span>+45<span class="nt">&lt;/span&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Vote Up"</span><span class="nt">&gt;&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"18 15 12 9 6 15"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
-               <span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"mr-1"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Vote Down"</span><span class="nt">&gt;</span>
-                  <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"6 9 12 15 18 9"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
-               <span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-1"</span><span class="nt">&gt;</span>·<span class="nt">&lt;/span&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"mr-1 text-muted"</span><span class="nt">&gt;</span>Reply<span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-1"</span><span class="nt">&gt;</span>·<span class="nt">&lt;/span&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Edit<span class="nt">&lt;/a&gt;</span>
-            <span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-4"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/002m.jpg)"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex-fill"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mt-n1"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"m-0"</span><span class="nt">&gt;</span>
-                  Mallory Hulme
-               <span class="nt">&lt;/h5&gt;</span>
-               <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto small text-muted"</span><span class="nt">&gt;</span>2 days ago<span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
-               Did anyone go camping in Oshkosh Wisconsin last month?
-            <span class="nt">&lt;/p&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"small"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-success mr-1"</span><span class="nt">&gt;</span>+32<span class="nt">&lt;/span&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Vote Up"</span><span class="nt">&gt;&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"18 15 12 9 6 15"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
-               <span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"mr-1"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Vote Down"</span><span class="nt">&gt;</span>
-                  <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"6 9 12 15 18 9"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
-               <span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-1"</span><span class="nt">&gt;</span>·<span class="nt">&lt;/span&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"mr-1 text-muted"</span><span class="nt">&gt;</span>Reply<span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-1"</span><span class="nt">&gt;</span>·<span class="nt">&lt;/span&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Edit<span class="nt">&lt;/a&gt;</span>
-            <span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                  </div>
-                  <div class="row">
-                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                        Copy code
-                      </a>
-                    </div>
-                    <div class="col">
-                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                        <input type="hidden" name="data" value='{"title":"Comments card","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
-                        <div class=\"card\">\n   
-                          <div class=\"card-header\">\n      
-                            <div class=\"card-title\">Comments</div>
-                            \n   </div>
-                          \n   
-                          <div class=\"card-body\">\n\n      \n      
-                            <div class=\"d-flex mb-5\">\n         
-                              <div class=\"mr-4\">\n            <span class=\"avatar\" style=\"background-image: url(../img/avatars/000m.jpg)\">\n  <span class=\"badge bg-green\"></span>\n</span>\n\n         </div>
-                              \n         
-                              <div class=\"flex-fill\">\n            
-                                <div class=\"d-flex mt-n1\">\n               
-                                  <h5 class=\"m-0\">\n                  Paweł Kuna\n               </h5>
-                                  \n               
-                                  <div class=\"ml-auto small text-muted\">1 week ago</div>
-                                  \n            </div>
-                                \n            
-                                <p class=\"mb-2\">\n               This is PERFECT\n            </p>
-                                \n            
-                                <div class=\"small\">\n               <span class=\"text-success mr-1\">+47</span>\n               <a href=\"#\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Vote Up\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><polyline points=\"18 15 12 9 6 15\"></polyline></svg>\n</a>\n               <a href=\"#\" class=\"mr-1\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Vote Down\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>\n\n               </a>\n               <span class=\"mr-1\">·</span>\n               <a href=\"#\" class=\"mr-1 text-muted\">Reply</a>\n               <span class=\"mr-1\">·</span>\n               <a href=\"#\" class=\"text-muted\">Edit</a>\n            </div>
-                                \n         </div>
-                              \n      </div>
-                            \n      \n      
-                            <div class=\"d-flex mb-5\">\n         
-                              <div class=\"mr-4\">\n            <span class=\"avatar\">\n  <span class=\"badge bg-green\"></span>\nJL</span>\n\n         </div>
-                              \n         
-                              <div class=\"flex-fill\">\n            
-                                <div class=\"d-flex mt-n1\">\n               
-                                  <h5 class=\"m-0\">\n                  Jeffie Lewzey\n               </h5>
-                                  \n               
-                                  <div class=\"ml-auto small text-muted\">1 week and 4 days ago</div>
-                                  \n            </div>
-                                \n            
-                                <p class=\"mb-2\">\n               She is so damn beautiful OMG i love her!!! does somebody knows what kind of music is this? sorry xD\n            </p>
-                                \n            
-                                <div class=\"small\">\n               <span class=\"text-success mr-1\">+45</span>\n               <a href=\"#\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Vote Up\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><polyline points=\"18 15 12 9 6 15\"></polyline></svg>\n</a>\n               <a href=\"#\" class=\"mr-1\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Vote Down\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>\n\n               </a>\n               <span class=\"mr-1\">·</span>\n               <a href=\"#\" class=\"mr-1 text-muted\">Reply</a>\n               <span class=\"mr-1\">·</span>\n               <a href=\"#\" class=\"text-muted\">Edit</a>\n            </div>
-                                \n         </div>
-                              \n      </div>
-                            \n      \n      
-                            <div class=\"d-flex\">\n         
-                              <div class=\"mr-4\">\n            <span class=\"avatar\" style=\"background-image: url(../img/avatars/002m.jpg)\">\n  <span class=\"badge bg-green\"></span>\n</span>\n\n         </div>
-                              \n         
-                              <div class=\"flex-fill\">\n            
-                                <div class=\"d-flex mt-n1\">\n               
-                                  <h5 class=\"m-0\">\n                  Mallory Hulme\n               </h5>
-                                  \n               
-                                  <div class=\"ml-auto small text-muted\">2 days ago</div>
-                                  \n            </div>
-                                \n            
-                                <p class=\"mb-2\">\n               Did anyone go camping in Oshkosh Wisconsin last month?\n            </p>
-                                \n            
-                                <div class=\"small\">\n               <span class=\"text-success mr-1\">+32</span>\n               <a href=\"#\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Vote Up\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><polyline points=\"18 15 12 9 6 15\"></polyline></svg>\n</a>\n               <a href=\"#\" class=\"mr-1\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Vote Down\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>\n\n               </a>\n               <span class=\"mr-1\">·</span>\n               <a href=\"#\" class=\"mr-1 text-muted\">Reply</a>\n               <span class=\"mr-1\">·</span>\n               <a href=\"#\" class=\"text-muted\">Edit</a>\n            </div>
-                                \n         </div>
-                              \n      </div>
-                            \n      \n\n   </div>
-                          \n</div>
-                        \n\n\n</div>
-                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                      <button type="submit" class="btn btn-primary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                        Edit in CodePen
-                      </button>
-                    </form>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  </div>
-  <script>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
-  <!-- Tabler Plugins -->
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
-</body>
-</html>

demo/components/card-ribbon.html

@@ -1,379 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Card with ribbon - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-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?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" 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>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="../index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" 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-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Tabler components
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-lg-3">
-              <div class="list-group list-group-transparent mb-0">
-                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action active">Card with ribbon</a>
-                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-              </div>
-            </div>
-            <div class="col-lg-9">
-              <div class="card">
-                <div class="card-body p-6">
-                  <div class="card-title">Card with ribbon</div>
-                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                      <div class="flex-fill" style="max-width: 274px">
-                        <div class="card">
-                          <div class="card-body">
-                            <h3 class="card-title">Card with ribbon</h3>
-                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.</p>
-                          </div>
-                          <div class="ribbon ribbon-bookmark bg-orange">-10%</div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card with ribbon<span class="nt">&lt;/h3&gt;</span>
-      <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.<span class="nt">&lt;/p&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ribbon ribbon-bookmark bg-orange"</span><span class="nt">&gt;</span>-10%<span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                  </div>
-                  <div class="row">
-                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                        Copy code
-                      </a>
-                    </div>
-                    <div class="col">
-                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                        <input type="hidden" name="data" value='{"title":"Card with ribbon","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n\n\n
-                        <div class=\"card\">\n\t
-                          <div class=\"card-body\">\n      \n      
-                            <h3 class=\"card-title\">Card with ribbon</h3>
-                            \n      
-                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.</p>
-                            \n      \n\t</div>
-                          \n\n\t
-                          <div class=\"ribbon ribbon-bookmark bg-orange\">-10%</div>
-                          \n</div>
-                        \n\n\n</div>
-                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                      <button type="submit" class="btn btn-primary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                        Edit in CodePen
-                      </button>
-                    </form>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  </div>
-  <script>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
-  <!-- Tabler Plugins -->
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
-</body>
-</html>

demo/components/card-tabs-bottom.html

@@ -1,497 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Card with bottom tabs - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-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?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" 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>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="../index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" 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-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Tabler components
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-lg-3">
-              <div class="list-group list-group-transparent mb-0">
-                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action active">Card with bottom tabs</a>
-                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-              </div>
-            </div>
-            <div class="col-lg-9">
-              <div class="card">
-                <div class="card-body p-6">
-                  <div class="card-title">Card with bottom tabs</div>
-                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                      <div class="flex-fill" style="max-width: 572px">
-                        <!-- Cards with tabs component -->
-                        <div class="card-tabs">
-                          <div class="tab-content">
-                            <!-- Content of card #1 -->
-                            <div id="tab-bottom-1" class="card tab-pane active show">
-                              <div class="card-body">
-                                <div class="card-title">Content of tab #1</div>
-                                <p>
-                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-                                </p>
-                              </div>
-                            </div>
-                            <!-- Content of card #2 -->
-                            <div id="tab-bottom-2" class="card tab-pane">
-                              <div class="card-body">
-                                <div class="card-title">Content of tab #2</div>
-                                <p>
-                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-                                </p>
-                              </div>
-                            </div>
-                            <!-- Content of card #3 -->
-                            <div id="tab-bottom-3" class="card tab-pane">
-                              <div class="card-body">
-                                <div class="card-title">Content of tab #3</div>
-                                <p>
-                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-                                </p>
-                              </div>
-                            </div>
-                            <!-- Content of card #4 -->
-                            <div id="tab-bottom-4" class="card tab-pane">
-                              <div class="card-body">
-                                <div class="card-title">Content of tab #4</div>
-                                <p>
-                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-                                </p>
-                              </div>
-                            </div>
-                          </div>
-                          <!-- Cards navigation -->
-                          <ul class="nav nav-tabs nav-tabs-bottom">
-                            <li class="nav-item"><a href="#tab-bottom-1" class="nav-link active" data-toggle="tab">Tab 1</a></li>
-                            <li class="nav-item"><a href="#tab-bottom-2" class="nav-link" data-toggle="tab">Tab 2</a></li>
-                            <li class="nav-item"><a href="#tab-bottom-3" class="nav-link" data-toggle="tab">Tab 3</a></li>
-                            <li class="nav-item"><a href="#tab-bottom-4" class="nav-link" data-toggle="tab">Tab 4</a></li>
-                          </ul>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                    <pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Cards with tabs component --&gt;</span>
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-tabs"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">&gt;</span>
-      <span class="c">&lt;!-- Content of card #1 --&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-bottom-1"</span> <span class="na">class=</span><span class="s">"card tab-pane active show"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Content of tab #1<span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;p&gt;</span>
-               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-            <span class="nt">&lt;/p&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="c">&lt;!-- Content of card #2 --&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-bottom-2"</span> <span class="na">class=</span><span class="s">"card tab-pane"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Content of tab #2<span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;p&gt;</span>
-               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-            <span class="nt">&lt;/p&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="c">&lt;!-- Content of card #3 --&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-bottom-3"</span> <span class="na">class=</span><span class="s">"card tab-pane"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Content of tab #3<span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;p&gt;</span>
-               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-            <span class="nt">&lt;/p&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="c">&lt;!-- Content of card #4 --&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-bottom-4"</span> <span class="na">class=</span><span class="s">"card tab-pane"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Content of tab #4<span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;p&gt;</span>
-               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-            <span class="nt">&lt;/p&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="c">&lt;!-- Cards navigation --&gt;</span>
-   <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs nav-tabs-bottom"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-bottom-1"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
-      <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-bottom-2"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 2<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
-      <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-bottom-3"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
-      <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-bottom-4"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 4<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
-   <span class="nt">&lt;/ul&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                  </div>
-                  <div class="row">
-                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                        Copy code
-                      </a>
-                    </div>
-                    <div class="col">
-                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                        <input type="hidden" name="data" value='{"title":"Card with bottom tabs","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n\n\n\n\n\n\n\n<!-- Cards with tabs component -->\n
-                        <div class=\"card-tabs\">\n   \n      \n
-                          <div class=\"tab-content\">\n   \n   <!-- Content of card #1 -->\n   
-                            <div id=\"tab-bottom-1\" class=\"card tab-pane active show\">\n      
-                              <div class=\"card-body\">\n         
-                                <div class=\"card-title\">Content of tab #1</div>
-                                \n         
-                                <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.\n         </p>
-                                \n      </div>
-                              \n   </div>
-                            \n   \n   <!-- Content of card #2 -->\n   
-                            <div id=\"tab-bottom-2\" class=\"card tab-pane\">\n      
-                              <div class=\"card-body\">\n         
-                                <div class=\"card-title\">Content of tab #2</div>
-                                \n         
-                                <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.\n         </p>
-                                \n      </div>
-                              \n   </div>
-                            \n   \n   <!-- Content of card #3 -->\n   
-                            <div id=\"tab-bottom-3\" class=\"card tab-pane\">\n      
-                              <div class=\"card-body\">\n         
-                                <div class=\"card-title\">Content of tab #3</div>
-                                \n         
-                                <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.\n         </p>
-                                \n      </div>
-                              \n   </div>
-                            \n   \n   <!-- Content of card #4 -->\n   
-                            <div id=\"tab-bottom-4\" class=\"card tab-pane\">\n      
-                              <div class=\"card-body\">\n         
-                                <div class=\"card-title\">Content of tab #4</div>
-                                \n         
-                                <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.\n         </p>
-                                \n      </div>
-                              \n   </div>
-                            \n   \n</div>
-                          \n\n      \n<!-- Cards navigation -->\n
-                          <ul class=\"nav nav-tabs nav-tabs-bottom\">\n   \n   
-                            <li class=\"nav-item\"><a href=\"#tab-bottom-1\" class=\"nav-link active\" data-toggle=\"tab\">Tab 1</a></li>
-                            \n   \n   
-                            <li class=\"nav-item\"><a href=\"#tab-bottom-2\" class=\"nav-link\" data-toggle=\"tab\">Tab 2</a></li>
-                            \n   \n   
-                            <li class=\"nav-item\"><a href=\"#tab-bottom-3\" class=\"nav-link\" data-toggle=\"tab\">Tab 3</a></li>
-                            \n   \n   
-                            <li class=\"nav-item\"><a href=\"#tab-bottom-4\" class=\"nav-link\" data-toggle=\"tab\">Tab 4</a></li>
-                            \n   \n</ul>
-                          \n\n   \n</div>
-                        \n\n\n</div>
-                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                      <button type="submit" class="btn btn-primary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                        Edit in CodePen
-                      </button>
-                    </form>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  </div>
-  <script>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
-  <!-- Tabler Plugins -->
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
-</body>
-</html>

demo/components/card-with-image.html

@@ -1,397 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Card with side image - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-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?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" 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>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="../index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" 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-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Tabler components
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-lg-3">
-              <div class="list-group list-group-transparent mb-0">
-                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action active">Card with side image</a>
-                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-              </div>
-            </div>
-            <div class="col-lg-9">
-              <div class="card">
-                <div class="card-body p-6">
-                  <div class="card-title">Card with side image</div>
-                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                      <div class="flex-fill" style="max-width: 572px">
-                        <div class="card">
-                          <div class="row row-0">
-                            <div class="col-md-3">
-                              <img src="../img/photos/2854fd67ddbd6217.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-                            </div>
-                            <div class="col">
-                              <div class="card-body">
-                                <h3 class="card-title">Card with side image</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                                  neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-0"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-3"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/2854fd67ddbd6217.jpg"</span> <span class="na">class=</span><span class="s">"w-100 h-100 object-cover"</span> <span class="na">alt=</span><span class="s">"Card side image"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card with side image<span class="nt">&lt;/h3&gt;</span>
-            <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-               neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                  </div>
-                  <div class="row">
-                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                        Copy code
-                      </a>
-                    </div>
-                    <div class="col">
-                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                        <input type="hidden" name="data" value='{"title":"Card with side image","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
-                        <div class=\"card\">\n   
-                          <div class=\"row row-0\">\n      
-                            <div class=\"col-md-3\">\n         <img src=\"../img/photos/2854fd67ddbd6217.jpg\" class=\"w-100 h-100 object-cover\" alt=\"Card side image\">\n      </div>
-                            \n      
-                            <div class=\"col\">\n         
-                              <div class=\"card-body\">\n            \n            
-                                <h3 class=\"card-title\">Card with side image</h3>
-                                \n            \n            
-                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima\n               neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                                \n         </div>
-                              \n      </div>
-                            \n   </div>
-                          \n</div>
-                        \n\n\n</div>
-                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                      <button type="submit" class="btn btn-primary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                        Edit in CodePen
-                      </button>
-                    </form>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  </div>
-  <script>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
-  <!-- Tabler Plugins -->
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
-</body>
-</html>

demo/components/empty.html

@@ -1,398 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Empty state - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/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?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" 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>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="../index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" 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-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Tabler components
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-lg-3">
-              <div class="list-group list-group-transparent mb-0">
-                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                <a href="/components/empty.html" class="list-group-item list-group-item-action active">Empty state</a>
-                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-              </div>
-            </div>
-            <div class="col-lg-9">
-              <div class="card">
-                <div class="card-body p-6">
-                  <div class="card-title">Empty state</div>
-                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                      <div >
-                        <div class="empty">
-                          <div class="empty-icon">
-                            <img src="../img/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">
-                              Search again
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-icon"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/illustrations/undraw_quitting_time_dm8t.svg"</span> <span class="na">class=</span><span class="s">"h-8 mb-4"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-title h3"</span><span class="nt">&gt;</span>No results found<span class="nt">&lt;/p&gt;</span>
-   <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-subtitle text-muted"</span><span class="nt">&gt;</span>
-      Try adjusting your search or filter to find what you're looking for.
-   <span class="nt">&lt;/p&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-action"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
-         Search again
-      <span class="nt">&lt;/a&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                  </div>
-                  <div class="row">
-                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                        Copy code
-                      </a>
-                    </div>
-                    <div class="col">
-                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                        <input type="hidden" name="data" value='{"title":"Empty state","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n
-                        <div class=\"empty\">\n   
-                          <div class=\"empty-icon\">\n      \n      \n      <img src=\"../img/illustrations/undraw_quitting_time_dm8t.svg\" class=\"h-8 mb-4\" alt=\"\">\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      <a href=\"#\" class=\"btn btn-primary\">\nSearch again\n</a>\n\n   </div>
-                          \n</div>
-                        \n\n\n</div>
-                      \nre looking for.\n   </p>
-                    \n   
-                    <div class=\"empty-action\">\n      \n      <a href=\"#\" class=\"btn btn-primary\">\nSearch again\n</a>\n\n   </div>
-                    \n</div>
-                  \n\n\n</div>
-                \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                <button type="submit" class="btn btn-primary mt-4 btn-block">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                  Edit in CodePen
-                </button>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</main>
-</div>
-</div>
-<script>
-  window.tabler_colors = {
-  'blue': '#206bc4',
-  'azure': '#45aaf2',
-  'indigo': '#6574cd',
-  'purple': '#a55eea',
-  'pink': '#f66d9b',
-  'red': '#fa4654',
-  'orange': '#fd9644',
-  'yellow': '#f1c40f',
-  'lime': '#7bd235',
-  'green': '#5eba00',
-  'teal': '#2bcbba',
-  'cyan': '#17a2b8',
-  'gray': '#868e96',
-  };
-</script>
-<!-- Libs JS -->
-<script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-<script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-<script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-<script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-<script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-<script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-<script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-<script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-<script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-<script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-<script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-<script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-<script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-<script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-<!-- Tabler Core -->
-<script src="../dist/js/tabler.min.js?1576401968"></script>
-<!-- Tabler Plugins -->
-<script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-<script>
-  document.body.style.display = 'block';
-</script>
-</body>
-</html>

demo/components/index.html

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

demo/components/input-colors.html

@@ -1,509 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Color input - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/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?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" 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>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="../index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" 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-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Tabler components
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-lg-3">
-              <div class="list-group list-group-transparent mb-0">
-                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                <a href="/components/input-colors.html" class="list-group-item list-group-item-action active">Color input</a>
-                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-              </div>
-            </div>
-            <div class="col-lg-9">
-              <div class="card">
-                <div class="card-body p-6">
-                  <div class="card-title">Color input</div>
-                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                      <div >
-                        <div class="mb-3">
-                          <label class="form-label">Color Input</label>
-                          <div class="row row-xs">
-                            <div class="col-auto">
-                              <label class="colorinput">
-                                <input name="color" type="checkbox" value="blue" class="colorinput-input" />
-                                <span class="colorinput-color bg-blue"></span>
-                              </label>
-                            </div>
-                            <div class="col-auto">
-                              <label class="colorinput">
-                                <input name="color" type="checkbox" value="azure" class="colorinput-input"  checked/>
-                                <span class="colorinput-color bg-azure"></span>
-                              </label>
-                            </div>
-                            <div class="col-auto">
-                              <label class="colorinput">
-                                <input name="color" type="checkbox" value="indigo" class="colorinput-input" />
-                                <span class="colorinput-color bg-indigo"></span>
-                              </label>
-                            </div>
-                            <div class="col-auto">
-                              <label class="colorinput">
-                                <input name="color" type="checkbox" value="purple" class="colorinput-input" />
-                                <span class="colorinput-color bg-purple"></span>
-                              </label>
-                            </div>
-                            <div class="col-auto">
-                              <label class="colorinput">
-                                <input name="color" type="checkbox" value="pink" class="colorinput-input" />
-                                <span class="colorinput-color bg-pink"></span>
-                              </label>
-                            </div>
-                            <div class="col-auto">
-                              <label class="colorinput">
-                                <input name="color" type="checkbox" value="red" class="colorinput-input" />
-                                <span class="colorinput-color bg-red"></span>
-                              </label>
-                            </div>
-                            <div class="col-auto">
-                              <label class="colorinput">
-                                <input name="color" type="checkbox" value="orange" class="colorinput-input" />
-                                <span class="colorinput-color bg-orange"></span>
-                              </label>
-                            </div>
-                            <div class="col-auto">
-                              <label class="colorinput">
-                                <input name="color" type="checkbox" value="yellow" class="colorinput-input" />
-                                <span class="colorinput-color bg-yellow"></span>
-                              </label>
-                            </div>
-                            <div class="col-auto">
-                              <label class="colorinput">
-                                <input name="color" type="checkbox" value="lime" class="colorinput-input" />
-                                <span class="colorinput-color bg-lime"></span>
-                              </label>
-                            </div>
-                            <div class="col-auto">
-                              <label class="colorinput">
-                                <input name="color" type="checkbox" value="green" class="colorinput-input" />
-                                <span class="colorinput-color bg-green"></span>
-                              </label>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Color Input<span class="nt">&lt;/label&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-xs"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"blue"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-blue"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"azure"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-azure"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"indigo"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-indigo"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"purple"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-purple"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"pink"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-pink"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"red"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-red"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"orange"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-orange"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"yellow"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-yellow"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"lime"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-lime"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"green"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                  </div>
-                  <div class="row">
-                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                        Copy code
-                      </a>
-                    </div>
-                    <div class="col">
-                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                        <input type="hidden" name="data" value='{"title":"Color input","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
-                        <div class=\"mb-3\">\n\t<label class=\"form-label\">Color Input</label>\n\t
-                          <div class=\"row row-xs\">\n\t\t\n\t\t
-                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"blue\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"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=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"azure\" class=\"colorinput-input\"  checked/>\n\t\t\t\t<span class=\"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=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"indigo\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"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=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"purple\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"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=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"pink\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"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=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"red\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"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=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"orange\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"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=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"yellow\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"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=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"lime\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-lime\"></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=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"green\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-green\"></span>\n\t\t\t</label>\n\t\t</div>
-                            \n\t\t\n\t</div>
-                          \n</div>
-                        \n\n\n</div>
-                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                      <button type="submit" class="btn btn-primary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                        Edit in CodePen
-                      </button>
-                    </form>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  </div>
-  <script>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
-  <!-- Tabler Plugins -->
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
-</body>
-</html>

demo/components/input-image.html

@@ -1,477 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Image input - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/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?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" 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>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="../index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" 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-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Tabler components
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-lg-3">
-              <div class="list-group list-group-transparent mb-0">
-                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                <a href="/components/input-image.html" class="list-group-item list-group-item-action active">Image input</a>
-                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-              </div>
-            </div>
-            <div class="col-lg-9">
-              <div class="card">
-                <div class="card-body p-6">
-                  <div class="card-title">Image input</div>
-                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                      <div class="flex-fill" style="max-width: 572px">
-                        <div class="mb-3">
-                          <label class="form-label">Image Check</label>
-                          <div class="row row-xs">
-                            <div class="col-6 col-sm-4">
-                              <label class="imagecheck mb-2">
-                                <input name="imagecheck" type="checkbox" value="1" class="imagecheck-input" />
-                                <span class="imagecheck-figure">
-                                  <img src="../img/photos/77586f6ffa9fbc5e.jpg" alt="" class="imagecheck-image">
-                                </span>
-                              </label>
-                            </div>
-                            <div class="col-6 col-sm-4">
-                              <label class="imagecheck mb-2">
-                                <input name="imagecheck" type="checkbox" value="2" class="imagecheck-input"  checked/>
-                                <span class="imagecheck-figure">
-                                  <img src="../img/photos/552683cc4e5f0e11.jpg" alt="" class="imagecheck-image">
-                                </span>
-                              </label>
-                            </div>
-                            <div class="col-6 col-sm-4">
-                              <label class="imagecheck mb-2">
-                                <input name="imagecheck" type="checkbox" value="3" class="imagecheck-input" />
-                                <span class="imagecheck-figure">
-                                  <img src="../img/photos/3664593f945f0d8d.jpg" alt="" class="imagecheck-image">
-                                </span>
-                              </label>
-                            </div>
-                            <div class="col-6 col-sm-4">
-                              <label class="imagecheck mb-2">
-                                <input name="imagecheck" type="checkbox" value="4" class="imagecheck-input"  checked/>
-                                <span class="imagecheck-figure">
-                                  <img src="../img/photos/529078594c496ec5.jpg" alt="" class="imagecheck-image">
-                                </span>
-                              </label>
-                            </div>
-                            <div class="col-6 col-sm-4">
-                              <label class="imagecheck mb-2">
-                                <input name="imagecheck" type="checkbox" value="5" class="imagecheck-input" />
-                                <span class="imagecheck-figure">
-                                  <img src="../img/photos/a74c41b6fb7fdf34.jpg" alt="" class="imagecheck-image">
-                                </span>
-                              </label>
-                            </div>
-                            <div class="col-6 col-sm-4">
-                              <label class="imagecheck mb-2">
-                                <input name="imagecheck" type="checkbox" value="6" class="imagecheck-input" />
-                                <span class="imagecheck-figure">
-                                  <img src="../img/photos/a159fb2bff29fda4.jpg" alt="" class="imagecheck-image">
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Image Check<span class="nt">&lt;/label&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-xs"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/77586f6ffa9fbc5e.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"2"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/552683cc4e5f0e11.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"3"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/3664593f945f0d8d.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"4"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/529078594c496ec5.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"5"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/a74c41b6fb7fdf34.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"6"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/a159fb2bff29fda4.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/label&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                  </div>
-                  <div class="row">
-                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                        Copy code
-                      </a>
-                    </div>
-                    <div class="col">
-                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                        <input type="hidden" name="data" value='{"title":"Image input","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n
-                        <div class=\"mb-3\">\n\t<label class=\"form-label\">Image Check</label>\n\t
-                          <div class=\"row row-xs\">\n\t\t\n\t\t
-                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"imagecheck mb-2\">\n\t\t\t\t<input name=\"imagecheck\" type=\"checkbox\" value=\"1\" class=\"imagecheck-input\" />\n\t\t\t\t<span class=\"imagecheck-figure\">\n\t\t\t\t\t<img src=\"../img/photos/77586f6ffa9fbc5e.jpg\" alt=\"\" class=\"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=\"imagecheck mb-2\">\n\t\t\t\t<input name=\"imagecheck\" type=\"checkbox\" value=\"2\" class=\"imagecheck-input\"  checked/>\n\t\t\t\t<span class=\"imagecheck-figure\">\n\t\t\t\t\t<img src=\"../img/photos/552683cc4e5f0e11.jpg\" alt=\"\" class=\"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=\"imagecheck mb-2\">\n\t\t\t\t<input name=\"imagecheck\" type=\"checkbox\" value=\"3\" class=\"imagecheck-input\" />\n\t\t\t\t<span class=\"imagecheck-figure\">\n\t\t\t\t\t<img src=\"../img/photos/3664593f945f0d8d.jpg\" alt=\"\" class=\"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=\"imagecheck mb-2\">\n\t\t\t\t<input name=\"imagecheck\" type=\"checkbox\" value=\"4\" class=\"imagecheck-input\"  checked/>\n\t\t\t\t<span class=\"imagecheck-figure\">\n\t\t\t\t\t<img src=\"../img/photos/529078594c496ec5.jpg\" alt=\"\" class=\"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=\"imagecheck mb-2\">\n\t\t\t\t<input name=\"imagecheck\" type=\"checkbox\" value=\"5\" class=\"imagecheck-input\" />\n\t\t\t\t<span class=\"imagecheck-figure\">\n\t\t\t\t\t<img src=\"../img/photos/a74c41b6fb7fdf34.jpg\" alt=\"\" class=\"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=\"imagecheck mb-2\">\n\t\t\t\t<input name=\"imagecheck\" type=\"checkbox\" value=\"6\" class=\"imagecheck-input\" />\n\t\t\t\t<span class=\"imagecheck-figure\">\n\t\t\t\t\t<img src=\"../img/photos/a159fb2bff29fda4.jpg\" alt=\"\" class=\"imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
-                            \n\t\t\n\t</div>
-                          \n</div>
-                        \n\n\n</div>
-                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                      <button type="submit" class="btn btn-primary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                        Edit in CodePen
-                      </button>
-                    </form>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  </div>
-  <script>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
-  <!-- Tabler Plugins -->
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
-</body>
-</html>

demo/components/progress.html

@@ -1,483 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Progress bar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/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?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" 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>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="../index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" 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-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Tabler components
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-lg-3">
-              <div class="list-group list-group-transparent mb-0">
-                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                <a href="/components/progress.html" class="list-group-item list-group-item-action active">Progress bar</a>
-                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-              </div>
-            </div>
-            <div class="col-lg-9">
-              <div class="card">
-                <div class="card-body p-6">
-                  <div class="card-title">Progress bar</div>
-                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                      <div class="flex-fill" style="max-width: 274px">
-                        <div>
-                          <div class="d-flex mb-1 align-items-center leading-none">
-                            <div class="text-h5 font-weight-bolder m-0">Label</div>
-                            <span class="ml-auto text-h6">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 leading-none">
-                            <div class="text-h5 font-weight-bolder m-0">Label</div>
-                            <span class="ml-auto text-h6">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 leading-none">
-                            <div class="text-h5 font-weight-bolder m-0">Label</div>
-                            <span class="ml-auto text-h6">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 leading-none">
-                            <div class="text-h5 font-weight-bolder m-0">Label</div>
-                            <span class="ml-auto text-h6">51%</span>
-                          </div>
-                          <div class="progress progress-sm">
-                            <div class="progress-bar bg-green" style="width: 51%" role="progressbar" aria-valuenow="51" aria-valuemin="0" aria-valuemax="100">
-                              <span class="sr-only">51% Complete</span>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center leading-none"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-h5 font-weight-bolder m-0"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6"</span><span class="nt">&gt;</span>45%<span class="nt">&lt;/span&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-blue"</span> <span class="na">style=</span><span class="s">"width: 45%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"45"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>45% Complete<span class="nt">&lt;/span&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center leading-none"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-h5 font-weight-bolder m-0"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6"</span><span class="nt">&gt;</span>32%<span class="nt">&lt;/span&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-red"</span> <span class="na">style=</span><span class="s">"width: 32%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"32"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>32% Complete<span class="nt">&lt;/span&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center leading-none"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-h5 font-weight-bolder m-0"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6"</span><span class="nt">&gt;</span>90%<span class="nt">&lt;/span&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-yellow"</span> <span class="na">style=</span><span class="s">"width: 90%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"90"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>90% Complete<span class="nt">&lt;/span&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center leading-none"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-h5 font-weight-bolder m-0"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6"</span><span class="nt">&gt;</span>51%<span class="nt">&lt;/span&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-green"</span> <span class="na">style=</span><span class="s">"width: 51%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"51"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>51% Complete<span class="nt">&lt;/span&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                  </div>
-                  <div class="row">
-                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                        Copy code
-                      </a>
-                    </div>
-                    <div class="col">
-                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                        <input type="hidden" name="data" value='{"title":"Progress bar","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n\n\n
-                        <div>\n   
-                          <div class=\"d-flex mb-1 align-items-center leading-none\">\n      
-                            <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
-                            \n      \n      <span class=\"ml-auto text-h6\">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 leading-none\">\n      
-                            <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
-                            \n      \n      <span class=\"ml-auto text-h6\">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 leading-none\">\n      
-                            <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
-                            \n      \n      <span class=\"ml-auto text-h6\">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 leading-none\">\n      
-                            <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
-                            \n      \n      <span class=\"ml-auto text-h6\">51%</span>\n   </div>
-                          \n   \n\n
-                          <div class=\"progress progress-sm\">\n   \n      
-                            <div class=\"progress-bar bg-green\" style=\"width: 51%\" role=\"progressbar\" aria-valuenow=\"51\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">51% Complete</span>\n         \n      </div>
-                            \n   \n</div>
-                          \n\n</div>
-                        \n\n\n</div>
-                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                      <button type="submit" class="btn btn-primary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                        Edit in CodePen
-                      </button>
-                    </form>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  </div>
-  <script>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
-  <!-- Tabler Plugins -->
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
-</body>
-</html>

demo/components/simple-avatar.html

@@ -1,361 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Simple avatar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/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?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" 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>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="../index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" 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-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Tabler components
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-lg-3">
-              <div class="list-group list-group-transparent mb-0">
-                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action active">Simple avatar</a>
-                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-              </div>
-            </div>
-            <div class="col-lg-9">
-              <div class="card">
-                <div class="card-body p-6">
-                  <div class="card-title">Simple avatar</div>
-                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                      <div >
-                        <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)">
-                          <span class="badge bg-green"></span>
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/000m.jpg)"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
-<span class="nt">&lt;/span&gt;</span></code></pre>
-                  </div>
-                  <div class="row">
-                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                        Copy code
-                      </a>
-                    </div>
-                    <div class="col">
-                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                        <input type="hidden" name="data" value='{"title":"Simple avatar","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  <span class=\"avatar\" style=\"background-image: url(../img/avatars/000m.jpg)\">\n  <span class=\"badge bg-green\"></span>\n</span>\n\n\n</div>
-                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                      <button type="submit" class="btn btn-primary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                        Edit in CodePen
-                      </button>
-                    </form>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  </div>
-  <script>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
-  <!-- Tabler Plugins -->
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
-</body>
-</html>

demo/components/simple-card.html

@@ -1,373 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Simple box - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/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?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" 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>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="../index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" 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-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Tabler components
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-lg-3">
-              <div class="list-group list-group-transparent mb-0">
-                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                <a href="/components/simple-card.html" class="list-group-item list-group-item-action active">Simple box</a>
-              </div>
-            </div>
-            <div class="col-lg-9">
-              <div class="card">
-                <div class="card-body p-6">
-                  <div class="card-title">Simple box</div>
-                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                      <div class="flex-fill" style="max-width: 274px">
-                        <div class="card">
-                          <div class="card-body">
-                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                              neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-         neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                  </div>
-                  <div class="row">
-                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                        Copy code
-                      </a>
-                    </div>
-                    <div class="col">
-                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                        <input type="hidden" name="data" value='{"title":"Simple box","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
-                        <div class=\"card\">\n      
-                          <div class=\"card-body\">\n         
-                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima\n            neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                            \n      </div>
-                          \n</div>
-                        \n\n\n</div>
-                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                      <button type="submit" class="btn btn-primary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                        Edit in CodePen
-                      </button>
-                    </form>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  </div>
-  <script>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
-  <!-- Tabler Plugins -->
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
-</body>
-</html>

demo/components/widget-revenue.html

@@ -1,433 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Revenue chart - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/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?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" 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>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="../index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" 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-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Tabler components
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-lg-3">
-              <div class="list-group list-group-transparent mb-0">
-                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action active">Revenue chart</a>
-                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
-                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-              </div>
-            </div>
-            <div class="col-lg-9">
-              <div class="card">
-                <div class="card-body p-6">
-                  <div class="card-title">Revenue chart</div>
-                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                      <div >
-                        <div class="card">
-                          <div class="card-body">
-                            <div class="d-flex">
-                              <div>Revenue</div>
-                              <div class="ml-auto">
-                                <div class="dropdown">
-                                  <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                    Last 7 days
-                                  </a>
-                                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
-                                    <a class="dropdown-item active" href="#">Last 7 days</a>
-                                    <a class="dropdown-item" href="#">Last 30 days</a>
-                                    <a class="dropdown-item" href="#">Last 3 months</a>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <div class="d-flex align-items-baseline">
-                              <div class="h1 mb-0 mr-2">$4,300</div>
-                              <div class="mr-auto">
-                                <span class="text-green d-inline-flex align-items-center leading-none">
-                                  8% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
-                                </span>
-                              </div>
-                            </div>
-                          </div>
-                          <div id="chart-revenue-bg" class="chart-sm"></div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div&gt;</span>Revenue<span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-toggle text-muted"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">id=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
-                  Last 7 days
-               <span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-right"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenuButton"</span><span class="nt">&gt;</span>
-                  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Last 7 days<span class="nt">&lt;/a&gt;</span>
-                  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Last 30 days<span class="nt">&lt;/a&gt;</span>
-                  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Last 3 months<span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-baseline"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"h1 mb-0 mr-2"</span><span class="nt">&gt;</span>$4,300<span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-auto"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-green d-inline-flex align-items-center leading-none"</span><span class="nt">&gt;</span>
-               8% <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon ml-1"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"23 6 13.5 15.5 8.5 10.5 1 18"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"17 6 23 6 23 12"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"chart-revenue-bg"</span> <span class="na">class=</span><span class="s">"chart-sm"</span><span class="nt">&gt;&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                  </div>
-                  <div class="row">
-                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                        Copy code
-                      </a>
-                    </div>
-                    <div class="col">
-                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                        <input type="hidden" name="data" value='{"title":"Revenue chart","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
-                        <div class=\"card\">\n   
-                          <div class=\"card-body\">\n      
-                            <div class=\"d-flex\">\n         
-                              <div>Revenue</div>
-                              \n         
-                              <div class=\"ml-auto\">\n            
-                                <div class=\"dropdown\">\n   <a class=\"dropdown-toggle text-muted\" href=\"#\" id=\"dropdownMenuButton\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n      Last 7 days\n   </a>\n   
-                                  <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"dropdownMenuButton\">\n      <a class=\"dropdown-item active\" href=\"#\">Last 7 days</a>\n      <a class=\"dropdown-item\" href=\"#\">Last 30 days</a>\n      <a class=\"dropdown-item\" href=\"#\">Last 3 months</a>\n   </div>
-                                  \n</div>
-                                \n\n         </div>
-                              \n      </div>
-                            \n      
-                            <div class=\"d-flex align-items-baseline\">\n         
-                              <div class=\"h1 mb-0 mr-2\">$4,300</div>
-                              \n         
-                              <div class=\"mr-auto\">\n            \n\n\n<span class=\"text-green d-inline-flex align-items-center leading-none\">\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
-                          <div id=\"chart-revenue-bg\" class=\"chart-sm\"></div>
-                          \n\n\n\n\n   \n\n\n\n\n</div>
-                        \n\n\n</div>
-                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                      <button type="submit" class="btn btn-primary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                        Edit in CodePen
-                      </button>
-                    </form>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  </div>
-  <script>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
-  <!-- Tabler Plugins -->
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
-</body>
-</html>

demo/components/widget-sales.html

@@ -1,447 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <title>Sales widget - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/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?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased ">
-    <div class="layout">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
-            <span class="layout-toggler-icon"></span>
-          </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" 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>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
-                <span class="ml-2 d-none d-lg-block leading-none">
-                  Paweł Kuna
-                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                </span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                  Profile
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Settings
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                  Inbox
-                  <span class="badge bg-primary ml-auto">6</span>
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                  Message
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                  Need help?
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                  Sign out
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </header>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
-        <div class="container">
-          <ul class="navbar-nav flex-wrap">
-            <li class="nav-item">
-              <a class="nav-link" href="../index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Dashboard
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../form-elements.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Form elements
-                </span>
-              </a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" 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-text">
-                  Base
-                </span>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
-                  <span class="nav-text">
-                    Buttons
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../charts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../users.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Users
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../layouts.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Layouts
-                </span>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../docs/index.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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-text">
-                  Documentation
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
-      <div class="layout-area-main">
-        <main class="container my-4 flex-fill">
-          <!-- Page title -->
-          <div class="page-title-box">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Tabler components
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-lg-3">
-              <div class="list-group list-group-transparent mb-0">
-                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
-                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
-                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
-                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
-                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
-                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
-                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
-                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
-                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
-                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
-                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action active">Sales widget</a>
-                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
-                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
-              </div>
-            </div>
-            <div class="col-lg-9">
-              <div class="card">
-                <div class="card-body p-6">
-                  <div class="card-title">Sales widget</div>
-                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
-                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
-                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
-                      <div class="flex-fill" style="max-width: 274px">
-                        <div class="card">
-                          <div class="card-body">
-                            <div class="d-flex">
-                              <div>Sales</div>
-                              <div class="ml-auto">
-                                <div class="dropdown">
-                                  <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                    Last 7 days
-                                  </a>
-                                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
-                                    <a class="dropdown-item active" href="#">Last 7 days</a>
-                                    <a class="dropdown-item" href="#">Last 30 days</a>
-                                    <a class="dropdown-item" href="#">Last 3 months</a>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <div class="h1 mb-3">75%</div>
-                            <div class="d-flex mb-2">
-                              <div>Conversion rate</div>
-                              <div class="ml-auto">
-                                <span class="text-green d-inline-flex align-items-center leading-none">
-                                  7% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
-                                </span>
-                              </div>
-                            </div>
-                            <div class="progress progress-sm">
-                              <div class="progress-bar bg-blue" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
-                                <span class="sr-only">75% Complete</span>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div&gt;</span>Sales<span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-toggle text-muted"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">id=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
-                  Last 7 days
-               <span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-right"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenuButton"</span><span class="nt">&gt;</span>
-                  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Last 7 days<span class="nt">&lt;/a&gt;</span>
-                  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Last 30 days<span class="nt">&lt;/a&gt;</span>
-                  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Last 3 months<span class="nt">&lt;/a&gt;</span>
-               <span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"h1 mb-3"</span><span class="nt">&gt;</span>75%<span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-2"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div&gt;</span>Conversion rate<span class="nt">&lt;/div&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-green d-inline-flex align-items-center leading-none"</span><span class="nt">&gt;</span>
-               7% <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon ml-1"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"23 6 13.5 15.5 8.5 10.5 1 18"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"17 6 23 6 23 12"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
-            <span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-blue"</span> <span class="na">style=</span><span class="s">"width: 75%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"75"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>75% Complete<span class="nt">&lt;/span&gt;</span>
-         <span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;/div&gt;</span>
-   <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;/div&gt;</span></code></pre>
-                  </div>
-                  <div class="row">
-                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                        Copy code
-                      </a>
-                    </div>
-                    <div class="col">
-                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                        <input type="hidden" name="data" value='{"title":"Sales widget","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
-                        <div class=\"card\">\n   
-                          <div class=\"card-body\">\n      
-                            <div class=\"d-flex\">\n         
-                              <div>Sales</div>
-                              \n         
-                              <div class=\"ml-auto\">\n            
-                                <div class=\"dropdown\">\n   <a class=\"dropdown-toggle text-muted\" href=\"#\" id=\"dropdownMenuButton\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n      Last 7 days\n   </a>\n   
-                                  <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"dropdownMenuButton\">\n      <a class=\"dropdown-item active\" href=\"#\">Last 7 days</a>\n      <a class=\"dropdown-item\" href=\"#\">Last 30 days</a>\n      <a class=\"dropdown-item\" href=\"#\">Last 3 months</a>\n   </div>
-                                  \n</div>
-                                \n\n         </div>
-                              \n      </div>
-                            \n      
-                            <div class=\"h1 mb-3\">75%</div>
-                            \n      
-                            <div class=\"d-flex mb-2\">\n         
-                              <div>Conversion rate</div>
-                              \n         
-                              <div class=\"ml-auto\">\n\n\n<span class=\"text-green d-inline-flex align-items-center leading-none\">\n   7% <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon ml-1\"><polyline points=\"23 6 13.5 15.5 8.5 10.5 1 18\"></polyline><polyline points=\"17 6 23 6 23 12\"></polyline></svg>\n\n</span>\n</div>
-                              \n      </div>
-                            \n      \n\n
-                            <div class=\"progress progress-sm\">\n   \n      
-                              <div class=\"progress-bar bg-blue\" style=\"width: 75%\" role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">75% Complete</span>\n         \n      </div>
-                              \n   \n</div>
-                            \n\n   </div>
-                          \n</div>
-                        \n\n\n</div>
-                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
-                      <button type="submit" class="btn btn-primary mt-4 btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                        Edit in CodePen
-                      </button>
-                    </form>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  </div>
-  <script>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
-  <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
-  <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
-  <!-- Tabler Plugins -->
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
-</body>
-</html>

demo/dist/css/demo.css

@@ -0,0 +1,489 @@
+/*!
+* Tabler v1.0.0-beta7 (https://tabler.io)
+* @version 1.0.0-beta7
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+pre.highlight,
+.highlight pre {
+  max-height: 30rem;
+  margin: 1.5rem 0;
+  overflow: auto;
+  border-radius: 4px;
+}
+pre.highlight::-webkit-scrollbar,
+.highlight pre::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  -webkit-transition: background 0.3s;
+  transition: background 0.3s;
+}
+@media (prefers-reduced-motion: reduce) {
+  pre.highlight::-webkit-scrollbar,
+.highlight pre::-webkit-scrollbar {
+    -webkit-transition: none;
+    transition: none;
+  }
+}
+pre.highlight::-webkit-scrollbar-thumb,
+.highlight pre::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: rgba(var(--tblr-body-color-rgb), 0.16);
+}
+pre.highlight::-webkit-scrollbar-track,
+.highlight pre::-webkit-scrollbar-track {
+  background: rgba(var(--tblr-body-color-rgb), 0.06);
+}
+pre.highlight:hover::-webkit-scrollbar-thumb,
+.highlight pre:hover::-webkit-scrollbar-thumb {
+  background: rgba(var(--tblr-body-color-rgb), 0.32);
+}
+pre.highlight::-webkit-scrollbar-corner,
+.highlight pre::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.highlight {
+  margin: 0;
+}
+.highlight code > * {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+.highlight .dl {
+  color: #4070a0;
+}
+.highlight .c {
+  color: #727272;
+}
+.highlight .c1 {
+  color: #727272;
+}
+.highlight .ch {
+  font-style: italic;
+  color: #60a0b0;
+}
+.highlight .cm {
+  color: #727272;
+}
+.highlight .cp {
+  color: #008085;
+}
+.highlight .cpf {
+  color: #007020;
+}
+.highlight .cs {
+  color: #727272;
+}
+.highlight .gd {
+  background-color: #fcc;
+  border: 1px solid #c00;
+}
+.highlight .ge {
+  font-style: italic;
+}
+.highlight .gh {
+  color: #030;
+}
+.highlight .gi {
+  background-color: #cfc;
+  border: 1px solid #0c0;
+}
+.highlight .gl {
+  text-decoration: underline;
+}
+.highlight .go {
+  color: #aaa;
+}
+.highlight .gp {
+  color: #009;
+}
+.highlight .gr {
+  color: #f00;
+}
+.highlight .gs {
+  font-weight: 700;
+}
+.highlight .gt {
+  color: #9c6;
+}
+.highlight .gu {
+  color: #030;
+}
+.highlight .il {
+  color: #c24f19;
+}
+.highlight .k {
+  color: #069;
+}
+.highlight .kc {
+  color: #069;
+}
+.highlight .kd {
+  color: #069;
+}
+.highlight .kn {
+  color: #069;
+}
+.highlight .kp {
+  color: #069;
+}
+.highlight .kr {
+  color: #069;
+}
+.highlight .kt {
+  color: #078;
+}
+.highlight .m {
+  color: #c24f19;
+}
+.highlight .mf {
+  color: #c24f19;
+}
+.highlight .mb {
+  color: #40a070;
+}
+.highlight .mh {
+  color: #c24f19;
+}
+.highlight .mi {
+  color: #c24f19;
+}
+.highlight .mo {
+  color: #c24f19;
+}
+.highlight .na {
+  color: #006ee0;
+}
+.highlight .nb {
+  color: #366;
+}
+.highlight .nc {
+  color: #168174;
+}
+.highlight .nd {
+  color: #6b62de;
+}
+.highlight .ne {
+  color: #c00;
+}
+.highlight .nf {
+  color: #b715f4;
+}
+.highlight .ni {
+  color: #727272;
+}
+.highlight .nl {
+  color: #6b62de;
+}
+.highlight .nn {
+  color: #007ca5;
+}
+.highlight .no {
+  color: #360;
+}
+.highlight .nt {
+  color: #2f6f9f;
+}
+.highlight .nv {
+  color: #033;
+}
+.highlight .o {
+  color: #555;
+}
+.highlight .ow {
+  color: #000;
+}
+.highlight .s {
+  color: #d73038;
+}
+.highlight .s1 {
+  color: #c30;
+}
+.highlight .s2 {
+  color: #c30;
+}
+.highlight .sa {
+  color: #4070a0;
+}
+.highlight .sb {
+  color: #c30;
+}
+.highlight .sc {
+  color: #c30;
+}
+.highlight .sd {
+  font-style: italic;
+  color: #c30;
+}
+.highlight .se {
+  color: #c30;
+}
+.highlight .sh {
+  color: #c30;
+}
+.highlight .si {
+  color: #a00;
+}
+.highlight .sr {
+  color: #337e7e;
+}
+.highlight .ss {
+  color: #fc3;
+}
+.highlight .sx {
+  color: #c30;
+}
+.highlight .w {
+  color: #bbb;
+}
+.highlight .language-bash::before, .highlight .language-sh::before {
+  color: #009;
+  content: "$ ";
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.highlight .language-bash .m, .highlight .language-sh .m {
+  color: inherit;
+}
+.highlight .language-powershell::before {
+  color: #009;
+  content: "PM> ";
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.example {
+  padding: 2rem;
+  margin: 1rem 0 2rem;
+  border: 1px solid #e6e7e9;
+  border-radius: 3px 3px 0 0;
+  position: relative;
+  min-height: 12rem;
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+}
+
+.example-centered {
+  justify-content: center;
+}
+.example-centered .example-content {
+  flex: 0 auto;
+}
+
+.example-content {
+  font-size: 0.875rem;
+  line-height: 1.4285714286;
+  color: #1e293b;
+  flex: 1;
+  max-width: 100%;
+}
+.example-content .page-header {
+  margin-bottom: 0;
+}
+
+.example-bg {
+  background: #fafbfc;
+}
+
+.example-code {
+  margin: 2rem 0;
+  border: 1px solid #e6e7e9;
+  border-top: none;
+}
+.example-code pre {
+  margin: 0;
+  border: 0;
+  border-radius: 0 0 3px 3px;
+}
+.example + .example-code {
+  margin-top: -2rem;
+}
+
+.example-column {
+  margin: 0 auto;
+}
+.example-column > .card:last-of-type {
+  margin-bottom: 0;
+}
+
+.example-column-1 {
+  max-width: 26rem;
+}
+
+.example-column-2 {
+  max-width: 52rem;
+}
+
+.example-modal-backdrop {
+  background: #1e293b;
+  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 {
+    background-color: #1b2434;
+    border-color: #2c3c56;
+  }
+  .theme-dark .example-content {
+    color: #fafbfc;
+  }
+  .theme-dark .example-code {
+    border-color: #2c3c56;
+    border-top: none;
+  }
+}
+@media not print {
+  @media (prefers-color-scheme: dark) {
+    .theme-dark-auto .example {
+      background-color: #1b2434;
+      border-color: #2c3c56;
+    }
+    .theme-dark-auto .example-content {
+      color: #fafbfc;
+    }
+    .theme-dark-auto .example-code {
+      border-color: #2c3c56;
+      border-top: none;
+    }
+  }
+}
+.card-sponsor {
+  background: #dbe7f6 no-repeat center/100% 100%;
+  border-color: #548ed2;
+  min-height: 316px;
+}
+
+body.no-transitions * {
+  transition: none !important;
+}
+
+.dropdown-menu-demo {
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  top: 0;
+  margin-bottom: 1rem;
+}
+
+.demo-icon-preview {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+}
+.demo-icon-preview svg,
+.demo-icon-preview i {
+  width: 15rem;
+  height: 15rem;
+  font-size: 15rem;
+  stroke-width: 1.5;
+  margin: 0 auto;
+  display: block;
+}
+@media (max-width: 575.98px) {
+  .demo-icon-preview svg,
+.demo-icon-preview i {
+    width: 10rem;
+    height: 10rem;
+    font-size: 10rem;
+  }
+}
+
+.demo-icon-preview-icon pre {
+  margin: 0;
+  -webkit-user-select: all;
+     -moz-user-select: all;
+          user-select: all;
+}
+
+.demo-dividers > p {
+  opacity: 0.2;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.demo-icons-list {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 0 -2px -1px 0;
+  list-style: none;
+}
+.demo-icons-list > * {
+  flex: 1 0 4rem;
+}
+
+.demo-icons-list-wrap {
+  overflow: hidden;
+}
+
+.demo-icons-list-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  text-align: center;
+  padding: 0.5rem;
+  border-right: 1px solid var(--tblr-border-color);
+  border-bottom: 1px solid var(--tblr-border-color);
+  color: inherit;
+  cursor: pointer;
+}
+.demo-icons-list-item .icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1.5rem;
+}
+.demo-icons-list-item:hover {
+  text-decoration: none;
+}
+
+.settings-btn {
+  position: fixed;
+  right: -1px;
+  top: 10rem;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0;
+}
+
+.settings-scheme {
+  display: inline-block;
+  border-radius: 50%;
+  height: 3rem;
+  width: 3rem;
+  position: relative;
+  border: 1px solid var(--tblr-border-color);
+  box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0;
+}
+.settings-scheme-light {
+  background: linear-gradient(135deg, #ffffff 50%, #fafbfc 50%);
+}
+.settings-scheme-mixed {
+  background-image: linear-gradient(135deg, #1e293b 50%, #fff 50%);
+}
+.settings-scheme-transparent {
+  background: #fafbfc;
+}
+.settings-scheme-dark {
+  background: #1e293b;
+}
+.settings-scheme-colored {
+  background-image: linear-gradient(135deg, var(--tblr-primary) 50%, #fafbfc 50%);
+}

demo/dist/css/demo.rtl.css

@@ -0,0 +1,489 @@
+/*!
+* Tabler v1.0.0-beta7 (https://tabler.io)
+* @version 1.0.0-beta7
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+pre.highlight,
+.highlight pre {
+  max-height: 30rem;
+  margin: 1.5rem 0;
+  overflow: auto;
+  border-radius: 4px;
+}
+pre.highlight::-webkit-scrollbar,
+.highlight pre::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  -webkit-transition: background 0.3s;
+  transition: background 0.3s;
+}
+@media (prefers-reduced-motion: reduce) {
+  pre.highlight::-webkit-scrollbar,
+.highlight pre::-webkit-scrollbar {
+    -webkit-transition: none;
+    transition: none;
+  }
+}
+pre.highlight::-webkit-scrollbar-thumb,
+.highlight pre::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: rgba(var(--tblr-body-color-rgb), 0.16);
+}
+pre.highlight::-webkit-scrollbar-track,
+.highlight pre::-webkit-scrollbar-track {
+  background: rgba(var(--tblr-body-color-rgb), 0.06);
+}
+pre.highlight:hover::-webkit-scrollbar-thumb,
+.highlight pre:hover::-webkit-scrollbar-thumb {
+  background: rgba(var(--tblr-body-color-rgb), 0.32);
+}
+pre.highlight::-webkit-scrollbar-corner,
+.highlight pre::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.highlight {
+  margin: 0;
+}
+.highlight code > * {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+.highlight .dl {
+  color: #4070a0;
+}
+.highlight .c {
+  color: #727272;
+}
+.highlight .c1 {
+  color: #727272;
+}
+.highlight .ch {
+  font-style: italic;
+  color: #60a0b0;
+}
+.highlight .cm {
+  color: #727272;
+}
+.highlight .cp {
+  color: #008085;
+}
+.highlight .cpf {
+  color: #007020;
+}
+.highlight .cs {
+  color: #727272;
+}
+.highlight .gd {
+  background-color: #fcc;
+  border: 1px solid #c00;
+}
+.highlight .ge {
+  font-style: italic;
+}
+.highlight .gh {
+  color: #030;
+}
+.highlight .gi {
+  background-color: #cfc;
+  border: 1px solid #0c0;
+}
+.highlight .gl {
+  text-decoration: underline;
+}
+.highlight .go {
+  color: #aaa;
+}
+.highlight .gp {
+  color: #009;
+}
+.highlight .gr {
+  color: #f00;
+}
+.highlight .gs {
+  font-weight: 700;
+}
+.highlight .gt {
+  color: #9c6;
+}
+.highlight .gu {
+  color: #030;
+}
+.highlight .il {
+  color: #c24f19;
+}
+.highlight .k {
+  color: #069;
+}
+.highlight .kc {
+  color: #069;
+}
+.highlight .kd {
+  color: #069;
+}
+.highlight .kn {
+  color: #069;
+}
+.highlight .kp {
+  color: #069;
+}
+.highlight .kr {
+  color: #069;
+}
+.highlight .kt {
+  color: #078;
+}
+.highlight .m {
+  color: #c24f19;
+}
+.highlight .mf {
+  color: #c24f19;
+}
+.highlight .mb {
+  color: #40a070;
+}
+.highlight .mh {
+  color: #c24f19;
+}
+.highlight .mi {
+  color: #c24f19;
+}
+.highlight .mo {
+  color: #c24f19;
+}
+.highlight .na {
+  color: #006ee0;
+}
+.highlight .nb {
+  color: #366;
+}
+.highlight .nc {
+  color: #168174;
+}
+.highlight .nd {
+  color: #6b62de;
+}
+.highlight .ne {
+  color: #c00;
+}
+.highlight .nf {
+  color: #b715f4;
+}
+.highlight .ni {
+  color: #727272;
+}
+.highlight .nl {
+  color: #6b62de;
+}
+.highlight .nn {
+  color: #007ca5;
+}
+.highlight .no {
+  color: #360;
+}
+.highlight .nt {
+  color: #2f6f9f;
+}
+.highlight .nv {
+  color: #033;
+}
+.highlight .o {
+  color: #555;
+}
+.highlight .ow {
+  color: #000;
+}
+.highlight .s {
+  color: #d73038;
+}
+.highlight .s1 {
+  color: #c30;
+}
+.highlight .s2 {
+  color: #c30;
+}
+.highlight .sa {
+  color: #4070a0;
+}
+.highlight .sb {
+  color: #c30;
+}
+.highlight .sc {
+  color: #c30;
+}
+.highlight .sd {
+  font-style: italic;
+  color: #c30;
+}
+.highlight .se {
+  color: #c30;
+}
+.highlight .sh {
+  color: #c30;
+}
+.highlight .si {
+  color: #a00;
+}
+.highlight .sr {
+  color: #337e7e;
+}
+.highlight .ss {
+  color: #fc3;
+}
+.highlight .sx {
+  color: #c30;
+}
+.highlight .w {
+  color: #bbb;
+}
+.highlight .language-bash::before, .highlight .language-sh::before {
+  color: #009;
+  content: "$ ";
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.highlight .language-bash .m, .highlight .language-sh .m {
+  color: inherit;
+}
+.highlight .language-powershell::before {
+  color: #009;
+  content: "PM> ";
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.example {
+  padding: 2rem;
+  margin: 1rem 0 2rem;
+  border: 1px solid #e6e7e9;
+  border-radius: 3px 3px 0 0;
+  position: relative;
+  min-height: 12rem;
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+}
+
+.example-centered {
+  justify-content: center;
+}
+.example-centered .example-content {
+  flex: 0 auto;
+}
+
+.example-content {
+  font-size: 0.875rem;
+  line-height: 1.4285714286;
+  color: #1e293b;
+  flex: 1;
+  max-width: 100%;
+}
+.example-content .page-header {
+  margin-bottom: 0;
+}
+
+.example-bg {
+  background: #fafbfc;
+}
+
+.example-code {
+  margin: 2rem 0;
+  border: 1px solid #e6e7e9;
+  border-top: none;
+}
+.example-code pre {
+  margin: 0;
+  border: 0;
+  border-radius: 0 0 3px 3px;
+}
+.example + .example-code {
+  margin-top: -2rem;
+}
+
+.example-column {
+  margin: 0 auto;
+}
+.example-column > .card:last-of-type {
+  margin-bottom: 0;
+}
+
+.example-column-1 {
+  max-width: 26rem;
+}
+
+.example-column-2 {
+  max-width: 52rem;
+}
+
+.example-modal-backdrop {
+  background: #1e293b;
+  opacity: 0.24;
+  position: absolute;
+  width: 100%;
+  right: 0;
+  top: 0;
+  height: 100%;
+  border-radius: 2px 2px 0 0;
+}
+
+@media not print {
+  .theme-dark .example {
+    background-color: #1b2434;
+    border-color: #2c3c56;
+  }
+  .theme-dark .example-content {
+    color: #fafbfc;
+  }
+  .theme-dark .example-code {
+    border-color: #2c3c56;
+    border-top: none;
+  }
+}
+@media not print {
+  @media (prefers-color-scheme: dark) {
+    .theme-dark-auto .example {
+      background-color: #1b2434;
+      border-color: #2c3c56;
+    }
+    .theme-dark-auto .example-content {
+      color: #fafbfc;
+    }
+    .theme-dark-auto .example-code {
+      border-color: #2c3c56;
+      border-top: none;
+    }
+  }
+}
+.card-sponsor {
+  background: #dbe7f6 no-repeat center/100% 100%;
+  border-color: #548ed2;
+  min-height: 316px;
+}
+
+body.no-transitions * {
+  transition: none !important;
+}
+
+.dropdown-menu-demo {
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  top: 0;
+  margin-bottom: 1rem;
+}
+
+.demo-icon-preview {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+}
+.demo-icon-preview svg,
+.demo-icon-preview i {
+  width: 15rem;
+  height: 15rem;
+  font-size: 15rem;
+  stroke-width: 1.5;
+  margin: 0 auto;
+  display: block;
+}
+@media (max-width: 575.98px) {
+  .demo-icon-preview svg,
+.demo-icon-preview i {
+    width: 10rem;
+    height: 10rem;
+    font-size: 10rem;
+  }
+}
+
+.demo-icon-preview-icon pre {
+  margin: 0;
+  -webkit-user-select: all;
+     -moz-user-select: all;
+          user-select: all;
+}
+
+.demo-dividers > p {
+  opacity: 0.2;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.demo-icons-list {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 0 0 -1px -2px;
+  list-style: none;
+}
+.demo-icons-list > * {
+  flex: 1 0 4rem;
+}
+
+.demo-icons-list-wrap {
+  overflow: hidden;
+}
+
+.demo-icons-list-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  text-align: center;
+  padding: 0.5rem;
+  border-left: 1px solid var(--tblr-border-color);
+  border-bottom: 1px solid var(--tblr-border-color);
+  color: inherit;
+  cursor: pointer;
+}
+.demo-icons-list-item .icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1.5rem;
+}
+.demo-icons-list-item:hover {
+  text-decoration: none;
+}
+
+.settings-btn {
+  position: fixed;
+  left: -1px;
+  top: 10rem;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0;
+}
+
+.settings-scheme {
+  display: inline-block;
+  border-radius: 50%;
+  height: 3rem;
+  width: 3rem;
+  position: relative;
+  border: 1px solid var(--tblr-border-color);
+  box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0;
+}
+.settings-scheme-light {
+  background: linear-gradient(-135deg, #ffffff 50%, #fafbfc 50%);
+}
+.settings-scheme-mixed {
+  background-image: linear-gradient(-135deg, #1e293b 50%, #fff 50%);
+}
+.settings-scheme-transparent {
+  background: #fafbfc;
+}
+.settings-scheme-dark {
+  background: #1e293b;
+}
+.settings-scheme-colored {
+  background-image: linear-gradient(-135deg, var(--tblr-primary) 50%, #fafbfc 50%);
+}

demo/dist/css/tabler-charts.css

@@ -1,22 +0,0 @@
-/*!
- * Tabler Charts (v0.9.0)
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
-.chart {
-  display: block;
-  min-height: 10rem; }
-  .chart text {
-    font-family: inherit; }
-
-.chart-sm {
-  height: 2.5rem; }
-
-.chart-square {
-  height: 5.75rem; }
-
-.chart-placeholder {
-  background-image: linear-gradient(135deg, #dce3e9 25%, transparent 25%, transparent 50%, #dce3e9 50%, #dce3e9 75%, transparent 75%, transparent 100%);
-  background-size: 14.14px 14.14px; }
-/*# sourceMappingURL=tabler-charts.css.map */

demo/dist/css/tabler-charts.min.css

@@ -1,7 +0,0 @@
-/*!
- * Tabler Charts (v0.9.0)
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */.chart{display:block;min-height:10rem}.chart text{font-family:inherit}.chart-sm{height:2.5rem}.chart-square{height:5.75rem}.chart-placeholder{background-image:linear-gradient(135deg,#dce3e9 25%,transparent 25%,transparent 50%,#dce3e9 50%,#dce3e9 75%,transparent 75%,transparent 100%);background-size:14.14px 14.14px}
-/*# sourceMappingURL=tabler-charts.min.css.map */

demo/dist/css/tabler-payments.css

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

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

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

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>