Release 1.0.0-beta10

# Conflicts:
#	src/pages/carousel.html

.bundlewatch.config.json

@@ -8,6 +8,14 @@
       "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"
@@ -26,11 +34,11 @@
     },
     {
       "path": "./dist/js/tabler.js",
-      "maxSize": "2 kB"
+      "maxSize": "100 kB"
     },
     {
       "path": "./dist/js/tabler.min.js",
-      "maxSize": "1.5 kB"
+      "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: "monthly"
-    default_reviewers:
-      - "codecalm"
-    default_labels:
-      - "dependencies"
-    version_requirement_updates: "increase_versions"

.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

@@ -21,5 +21,5 @@ node_modules/
 /svg-tmp/
 /components/
 /percy.sh
-/Gemfile.lock
-/package-lock.json
+/src/pages/playground.html
+/src/pages/features.html

.percy.yml

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

CHANGELOG.md

@@ -0,0 +1,112 @@
+# 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` - 2022-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
+
+
+## `1.0.0-beta7` - 2022-02-05
+
+- fix: #1019 - project-overview.html link not working
+- fix: #1010 - card with bottom tabs has incorrect border radius
+- uptime monitor mobile fixes
+- navbar dark button fix
+- `tabler-icons` link
+- autoloading webfonts
+- cards fixes, new cards demos
+- ruby dependencies update
+- RTL stylesheet fixes
+- new card action demos
+
+
+## `1.0.0-beta8` - 2022-02-05
+
+- update dependencies
+- new vector maps demos
+- fixes update map on resize
+- docs improvement
+- replace `badge` with `status-dot` in `navbar-notifications.html`
+- map tooltip fixes
+
+
+## `1.0.0-beta9` - 2022-02-26
+
+- fix: #1061 - list group item colors in light and dark modes
+- new 'tasks' dashboard
+- fix: #1059 - upload button in form element in dark view has problem
+- fix: #1052 - card background icon is practically invisible
+- remove Inter font and use default font system stack
+- fix: #1018 - vector map not working
+- fix: #1035 - wrong background color of hovered list group items in dark mode
+- dependencies update
+- add `font-display: swap;` to improve font loading
+- new `Boxed` layout

Gemfile

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

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,19 +1,31 @@
-# Tabler
 
+<p align="center">
+<a href="https://github.com/tabler/tabler"><img src="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/logo.svg" alt="A premium and open source dashboard template with a responsive and high-quality UI." width="300"></a><br><br>
 A premium and open source dashboard template with a responsive and high-quality UI.
+</p>
 
-<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>
+<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>
+<a href="https://github.com/tabler/tabler/actions/workflows/preview.yml" target="__blank"><img alt="GitHub stars" src="https://github.com/tabler/tabler/actions/workflows/preview.yml/badge.svg"></a>
+<a href="https://github.com/tabler/tabler" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/tabler/tabler?style=social"></a>
+</p>
 
-![Tabler preview](/src/static/tabler-preview.png?raw=true)
+<p align="center">
+  <a href="https://github.com/sponsors/codecalm">
+    <img src='https://raw.githubusercontent.com/tabler/static/main/sponsors.svg'>
+  </a>
+</p>
 
 
-## Status
+## Preview
 
-<a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"></a> 
-<a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"></a> 
-<a href="https://www.npmjs.com/package/tabler"><img src="https://img.shields.io/npm/dt/tabler.svg" alt="Total Downloads"></a> 
-<a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg" alt="License"></a> 
-<a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler.svg" alt="Latest Release"></a>
+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>
+
+<a href="https://preview.tabler.io" target="_blank"><img src="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/tabler-preview.png" alt="Tabler preview"></a>
 
 
 ## Features
@@ -28,9 +40,13 @@ We've created this admin panel for everyone who wants to create templates based
 * **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="/static/sponsor-banner-readme.png?raw=true" alt="Sponsor Tabler" /></a>
+<a href="https://github.com/sponsors/codecalm" target="_blank"><img src="/src/static/sponsor-banner-readme.png?raw=true" alt="Sponsor Tabler" /></a>
 
 
 ### Sponsors
@@ -71,12 +87,35 @@ Once you complete the setup, you'll be able to run the various commands provided
 
 1. From the root `/tabler` directory, run `npm run start` in the command line.
 2. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
-3. Any change in the `/pages` directory will build the application and refresh the page.
+3. Any change in the `/src` directory will build the application and refresh the page.
 
 **Note**:
 Run `npm run build` for reforms a one off build application without refresh.
 Open [http://localhost:3001](http://localhost:3001) to configure the Web server.
 
+## Installation
+
+Tabler is distributed via npm.
+
+```sh
+npm install --save @tabler/core
+```
+
+### CDN support
+
+All files included in `@tabler/core` npm package are available over a CDN.
+
+#### Javascript
+
+```html
+<script src="https://unpkg.com/@tabler/core@latest/dist/js/tabler.min.js"></script>
+```
+
+#### Styles
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@tabler/core@latest/dist/css/tabler.min.css">
+```
 
 ## Feature requests
 
@@ -109,6 +148,12 @@ Thank you to all our backers! 🙏 [Become a backer](https://opencollective.com/
 
 <a href="https://opencollective.com/tabler#backers" target="_blank"><img src="https://opencollective.com/tabler/tiers/backer.svg?width=890&button=false" /></a>
 
+## Thanks
+
+<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>
+
+Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.
+
 ## License
 
 See the [LICENSE](https://github.com/tabler/tabler/blob/master/LICENSE) file.

_config.yml

@@ -7,15 +7,27 @@ keep_files:
   - 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.
 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
 
-mapbox_key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
+mapbox-key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
+google-maps-key: AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI
+google-maps-dev-key: AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw
+npm-package: "@tabler/core"
+
+random-date-from: "2018-01-01"
+random-date-to: "2022-01-01"
 
 debug: false
 
@@ -23,14 +35,14 @@ layout-dark: false
 
 plugins:
   - jekyll-random
-  - jekyll-toc
   - jekyll-tidy
   - jekyll-timeago
   - jekyll-redirect-from
 
-tabler-plugins:
+tabler-css-plugins:
   - tabler-flags
   - tabler-payments
+  - tabler-vendors
 
 exclude:
   - .jekyll-cache
@@ -45,11 +57,6 @@ jekyll_tidy:
   compress_html: false
   ignore_env: development
 
-toc:
-  min_level: 2
-  max_level: 3
-  list_class: list-unstyled
-
 collections:
   docs:
     output: true
@@ -60,7 +67,6 @@ defaults:
       path: "*.md"
     values:
       layout: markdown
-
   - scope:
       type: "pages"
     values:
@@ -69,43 +75,54 @@ defaults:
       type: "docs"
     values:
       layout: docs
-      toc: true
 
 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
 
@@ -130,7 +147,7 @@ variants:
   - name: danger
     icon: alert-circle
 
-button-variants:
+theme-colors:
   primary:
     class: primary
     title: Primary
@@ -203,7 +220,7 @@ socials:
     title: Flickr
   bitbucket:
     icon: brand-bitbucket
-    title: Bitbucker
+    title: Bitbucket
   tabler:
     icon: brand-tabler
     title: Tabler

demo/accordion.html

@@ -0,0 +1,616 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta10
+* @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="./datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          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
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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" >
+                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="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="14" x2="15" y2="14" /></svg>
+                            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">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <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="./faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./users.html">
+                          Users
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./license.html">
+                          License
+                        </a>
+                        <a class="dropdown-item" href="./music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="./tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="./widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="./wizard.html">
+                          Wizard
+                        </a>
+                      </div>
+                    </div>
+                  </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-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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">
+                      1960 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" 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/lifebuoy -->
+                      <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" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./docs/index.html">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="./changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </a>
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="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 project!
+                    </a>
+                  </div>
+                </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 g-2 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-beta10
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js" defer></script>
+    <script src="./dist/js/demo.min.js" defer></script>
+  </body>
+</html>

demo/activity.html

@@ -0,0 +1,818 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta10
+* @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="./datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          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
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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" >
+                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="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="14" x2="15" y2="14" /></svg>
+                            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">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <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="./faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./users.html">
+                          Users
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./license.html">
+                          License
+                        </a>
+                        <a class="dropdown-item" href="./music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="./tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="./widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="./wizard.html">
+                          Wizard
+                        </a>
+                      </div>
+                    </div>
+                  </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-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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">
+                      1960 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" 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/lifebuoy -->
+                      <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" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./docs/index.html">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="./changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </a>
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="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 project!
+                    </a>
+                  </div>
+                </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 g-2 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-beta10
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js" defer></script>
+    <script src="./dist/js/demo.min.js" defer></script>
+  </body>
+</html>

demo/all.html

@@ -1,898 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.10
-* @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Index - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
-        <div class="container-xl">
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
-          </a>
-          <div class="navbar-nav flex-row order-md-last">
-            <div class="nav-item dropdown d-none d-md-flex mr-3">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                <span class="badge bg-red"></span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="nav-item dropdown">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-xl-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a href="#" class="dropdown-item">Set status</a>
-                <a href="#" class="dropdown-item">Profile & account</a>
-                <a href="#" class="dropdown-item">Feedback</a>
-                <div class="dropdown-divider"></div>
-                <a href="#" class="dropdown-item">Settings</a>
-                <a href="#" class="dropdown-item">Logout</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </header>
-      <div class="navbar-expand-md">
-        <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
-            <div class="container-xl">
-              <ul class="navbar-nav">
-                <li class="nav-item">
-                  <a class="nav-link" href="./index.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Home
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      User Interface
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
-                    <li >
-                      <a class="dropdown-item" href="./empty.html" >
-                        Empty page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./blank.html" >
-                        Blank page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./cards-masonry.html" >
-                        Cards Masonry
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./dropdowns.html" >
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./icons.html" >
-                        Icons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./modals.html" >
-                        Modals
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maps.html" >
-                        Maps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maps-vector.html" >
-                        Vector maps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./navigation.html" >
-                        Navigation
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./pagination.html" >
-                        Pagination
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./skeleton.html" >
-                        Skeleton
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs-index.html" >
-                        Docs index
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./error-404.html" class="dropdown-item">404 page</a>
-                        <a href="./error-500.html" class="dropdown-item">500 page</a>
-                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./form-elements.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Form elements
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Extra
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./pricing.html" >
-                        Pricing cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./welcome.html" >
-                        Welcome
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Layout
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./layout-horizontal.html" >
-                        Horizontal
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-vertical.html" >
-                        Vertical
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-vertical-right.html" >
-                        Right vertical
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-condensed.html" >
-                        Condensed
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                        Condensed dark
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-combo.html" >
-                        Combined
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-navbar-dark.html" >
-                        Navbar dark
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
-                        Navbar overlap
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-dark.html" >
-                        Dark mode
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-rtl.html" >
-                        RTL mode
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-fluid.html" >
-                        Fluid
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-fluid-vertical.html" >
-                        Fluid vertical
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Docs
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                    <li >
-                      <a class="dropdown-item" href="./docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/dropdowns.html" >
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/modals.html" >
-                        Modals
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/ribbons.html" >
-                        Ribbons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/skeleton.html" >
-                        Skeleton
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="content">
-        <div class="container-xl">
-          <!-- Page title -->
-          <div class="page-header">
-            <div class="row align-items-center">
-              <div class="col">
-                <h2 class="page-title">
-                  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="/layout-vertical.html">
-                        layout-vertical.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/redirects.json">
-                        redirects.json
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/tables.html">
-                        tables.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/skeleton.html">
-                        skeleton.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/settings-index.html">
-                        settings-index.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-combo.html">
-                        layout-combo.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-condensed-dark.html">
-                        layout-condensed-dark.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-condensed.html">
-                        layout-condensed.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-dark.html">
-                        layout-dark.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-fluid-vertical.html">
-                        layout-fluid-vertical.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-fluid.html">
-                        layout-fluid.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-horizontal.html">
-                        layout-horizontal.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-navbar-dark.html">
-                        layout-navbar-dark.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-navbar-overlap.html">
-                        layout-navbar-overlap.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/search-results.html">
-                        search-results.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-vertical-right.html">
-                        layout-vertical-right.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/blank.html">
-                        Blank page
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/buttons.html">
-                        Buttons
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/calendar.html">
-                        Calendar
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/cards.html">
-                        Cards
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/cards-masonry.html">
-                        Cards Masonry
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/carousel.html">
-                        Carousel
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/changelog.html">
-                        Changelog
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/charts.html">
-                        Charts
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/crypto-currencies.html">
-                        Crypto currencies
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/docs.html">
-                        Documentation
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/dropdowns.html">
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/empty.html">
-                        Empty page
-                      </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">
-                        Gallery
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/charts-heatmap.html">
-                        Heatmap Charts
-                      </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="/lists.html">
-                        Lists
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/error-maintenance.html">
-                        Maintenance mode
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/maps.html">
-                        Maps
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/markdown.html">
-                        Markdown
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/modals.html">
-                        Modals
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/music.html">
-                        Music components
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/navigation.html">
-                        Navigation
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/error-404.html">
-                        Page 404
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/error-500.html">
-                        Page 500
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/pagination.html">
-                        Pagination
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/pricing.html">
-                        Pricing cards
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-rtl.html">
-                        RTL mode
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/sign-in.html">
-                        Sign in
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/sign-up.html">
-                        Sign up
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/snippets.html">
-                        Snippets
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/social.html">
-                        Social elements
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/tabs.html">
-                        Tabs
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/typography.html">
-                        Typography
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/users.html">
-                        Users list
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/maps-vector.html">
-                        Vector Maps
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/wizard.html">
-                        Wizard
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <footer class="footer footer-transparent">
-          <div class="container">
-            <div class="row text-center align-items-center flex-row-reverse">
-              <div class="col-lg-auto ml-lg-auto">
-                <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
-                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
-                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
-                </ul>
-              </div>
-              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
-                <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item">
-                    Copyright © 2020
-                    <a href="." class="link-secondary">Tabler</a>.
-                    All rights reserved.
-                  </li>
-                  <li class="list-inline-item">
-                    <a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </footer>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

demo/auth-lock.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta10
+* @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" defer></script>
+    <script src="./dist/js/demo.min.js" defer></script>
+  </body>
+</html>

demo/calendar.html

@@ -1,701 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.10
-* @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Calendar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- CSS files -->
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
-        <div class="container-xl">
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
-          </a>
-          <div class="navbar-nav flex-row order-md-last">
-            <div class="nav-item dropdown d-none d-md-flex mr-3">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                <span class="badge bg-red"></span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="nav-item dropdown">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-xl-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a href="#" class="dropdown-item">Set status</a>
-                <a href="#" class="dropdown-item">Profile & account</a>
-                <a href="#" class="dropdown-item">Feedback</a>
-                <div class="dropdown-divider"></div>
-                <a href="#" class="dropdown-item">Settings</a>
-                <a href="#" class="dropdown-item">Logout</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </header>
-      <div class="navbar-expand-md">
-        <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
-            <div class="container-xl">
-              <ul class="navbar-nav">
-                <li class="nav-item">
-                  <a class="nav-link" href="./index.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Home
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      User Interface
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
-                    <li >
-                      <a class="dropdown-item" href="./empty.html" >
-                        Empty page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./blank.html" >
-                        Blank page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./cards-masonry.html" >
-                        Cards Masonry
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./dropdowns.html" >
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./icons.html" >
-                        Icons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./modals.html" >
-                        Modals
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maps.html" >
-                        Maps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maps-vector.html" >
-                        Vector maps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./navigation.html" >
-                        Navigation
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./pagination.html" >
-                        Pagination
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./skeleton.html" >
-                        Skeleton
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item active" href="./calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs-index.html" >
-                        Docs index
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./error-404.html" class="dropdown-item">404 page</a>
-                        <a href="./error-500.html" class="dropdown-item">500 page</a>
-                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./form-elements.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Form elements
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Extra
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./pricing.html" >
-                        Pricing cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./welcome.html" >
-                        Welcome
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Layout
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./layout-horizontal.html" >
-                        Horizontal
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-vertical.html" >
-                        Vertical
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-vertical-right.html" >
-                        Right vertical
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-condensed.html" >
-                        Condensed
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                        Condensed dark
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-combo.html" >
-                        Combined
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-navbar-dark.html" >
-                        Navbar dark
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
-                        Navbar overlap
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-dark.html" >
-                        Dark mode
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-rtl.html" >
-                        RTL mode
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-fluid.html" >
-                        Fluid
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-fluid-vertical.html" >
-                        Fluid vertical
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Docs
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                    <li >
-                      <a class="dropdown-item" href="./docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/dropdowns.html" >
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/modals.html" >
-                        Modals
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/ribbons.html" >
-                        Ribbons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/skeleton.html" >
-                        Skeleton
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="content">
-        <div class="container-xl">
-          <!-- Page title -->
-          <div class="page-header">
-            <div class="row align-items-center">
-              <div class="col">
-                <h2 class="page-title">
-                  Calendar
-                </h2>
-              </div>
-              <!-- Page title actions -->
-              <div class="col-auto ml-auto d-print-none">
-                <div class="d-flex">
-                  <a href="#" class="btn btn-primary">
-                    <svg xmlns="http://www.w3.org/2000/svg" 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 event
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="card">
-            <div class="card-body">
-              <div id="calendar-main" class="card-calendar"></div>
-            </div>
-          </div>
-        </div>
-        <footer class="footer footer-transparent">
-          <div class="container">
-            <div class="row text-center align-items-center flex-row-reverse">
-              <div class="col-lg-auto ml-lg-auto">
-                <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
-                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
-                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
-                </ul>
-              </div>
-              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
-                <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item">
-                    Copyright © 2020
-                    <a href="." class="link-secondary">Tabler</a>.
-                    All rights reserved.
-                  </li>
-                  <li class="list-inline-item">
-                    <a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </footer>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/fullcalendar/core/main.min.js"></script>
-    <script src="./dist/libs/fullcalendar/daygrid/main.min.js"></script>
-    <script src="./dist/libs/fullcalendar/interaction/main.min.js"></script>
-    <script src="./dist/libs/fullcalendar/timegrid/main.min.js"></script>
-    <script src="./dist/libs/fullcalendar/list/main.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      document.addEventListener('DOMContentLoaded', function () {
-            var calendarEl = document.getElementById('calendar-main'),
-               today = new Date(),
-               y = today.getFullYear(),
-               m = today.getMonth(),
-               d = today.getDate();
-            window.FullCalendar && (new FullCalendar.Calendar(calendarEl, {
-      	   plugins: [ 'interaction', 'dayGrid' ],
-               themeSystem: 'standard',
-      	   header: {
-      		   left: 'title',
-      		   center: '',
-      		   right: 'prev,next'
-      	   },
-      	   selectable: true,
-      	   selectHelper: true,
-      	   nowIndicator: true,
-      	   views: {
-      		   dayGridMonth: { buttonText: 'month' },
-      		   timeGridWeek: { buttonText: 'week' },
-      		   timeGridDay: { buttonText: 'day' }
-      	   },
-      	   defaultView: 'dayGridMonth',
-      	   timeFormat: 'H(:mm)',
-      	   events: [
-      	   	{
-                     title: 'All Day Event',
-                     start: new Date(y, m, 1),
-      			   className: 'bg-blue-lt'
-                  },
-                  {
-                     id: 999,
-                     title: 'Repeating Event',
-                     start: new Date(y, m, 7, 6, 0),
-                     allDay: false,
-                     className: 'bg-blue-lt'
-                  },
-                  {
-                     id: 999,
-                     title: 'Repeating Event',
-                     start: new Date(y, m, 14, 6, 0),
-                     allDay: false,
-                     className: 'bg-lime-lt'
-                  },
-                  {
-                     title: 'Meeting',
-                     start: new Date(y, m, 4, 10, 30),
-                     allDay: false,
-                     className: 'bg-green-lt'
-                  },
-                  {
-                     title: 'Lunch',
-                     start: new Date(y, m, 5, 12, 0),
-                     end: new Date(y, m, 5, 14, 0),
-                     allDay: false,
-                     className: 'bg-red-lt'
-                  },
-                  {
-                     title: 'LBD Launch',
-                     start: new Date(y, m, 19, 12, 0),
-                     allDay: true,
-                     className: 'bg-azure-lt'
-                  },
-                  {
-                     title: 'Birthday Party',
-                     start: new Date(y, m, 16, 19, 0),
-                     end: new Date(y, m, 16, 22, 30),
-                     allDay: false,
-      		      className: 'bg-orange-lt'
-                  }
-               ]
-         })).render();
-      });
-    </script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

demo/card-actions.html

@@ -0,0 +1,772 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta10
+* @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="./datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          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
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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" >
+                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="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="14" x2="15" y2="14" /></svg>
+                            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">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <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="./faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./users.html">
+                          Users
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./license.html">
+                          License
+                        </a>
+                        <a class="dropdown-item" href="./music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="./tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="./widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="./wizard.html">
+                          Wizard
+                        </a>
+                      </div>
+                    </div>
+                  </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-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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">
+                      1960 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" 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/lifebuoy -->
+                      <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" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./docs/index.html">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="./changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </a>
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="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 project!
+                    </a>
+                  </div>
+                </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 g-2 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-beta10
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js" defer></script>
+    <script src="./dist/js/demo.min.js" defer></script>
+  </body>
+</html>

demo/charts-heatmap.html

@@ -1,788 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.10
-* @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Heatmap Charts - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
-        <div class="container-xl">
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
-          </a>
-          <div class="navbar-nav flex-row order-md-last">
-            <div class="nav-item dropdown d-none d-md-flex mr-3">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                <span class="badge bg-red"></span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="nav-item dropdown">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-xl-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a href="#" class="dropdown-item">Set status</a>
-                <a href="#" class="dropdown-item">Profile & account</a>
-                <a href="#" class="dropdown-item">Feedback</a>
-                <div class="dropdown-divider"></div>
-                <a href="#" class="dropdown-item">Settings</a>
-                <a href="#" class="dropdown-item">Logout</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </header>
-      <div class="navbar-expand-md">
-        <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
-            <div class="container-xl">
-              <ul class="navbar-nav">
-                <li class="nav-item">
-                  <a class="nav-link" href="./index.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Home
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      User Interface
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
-                    <li >
-                      <a class="dropdown-item" href="./empty.html" >
-                        Empty page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./blank.html" >
-                        Blank page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./cards-masonry.html" >
-                        Cards Masonry
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./dropdowns.html" >
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./icons.html" >
-                        Icons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./modals.html" >
-                        Modals
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maps.html" >
-                        Maps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maps-vector.html" >
-                        Vector maps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./navigation.html" >
-                        Navigation
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./pagination.html" >
-                        Pagination
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./skeleton.html" >
-                        Skeleton
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs-index.html" >
-                        Docs index
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./error-404.html" class="dropdown-item">404 page</a>
-                        <a href="./error-500.html" class="dropdown-item">500 page</a>
-                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./form-elements.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Form elements
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Extra
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./pricing.html" >
-                        Pricing cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./welcome.html" >
-                        Welcome
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Layout
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./layout-horizontal.html" >
-                        Horizontal
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-vertical.html" >
-                        Vertical
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-vertical-right.html" >
-                        Right vertical
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-condensed.html" >
-                        Condensed
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                        Condensed dark
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-combo.html" >
-                        Combined
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-navbar-dark.html" >
-                        Navbar dark
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
-                        Navbar overlap
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-dark.html" >
-                        Dark mode
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-rtl.html" >
-                        RTL mode
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-fluid.html" >
-                        Fluid
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-fluid-vertical.html" >
-                        Fluid vertical
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Docs
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                    <li >
-                      <a class="dropdown-item" href="./docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/dropdowns.html" >
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/modals.html" >
-                        Modals
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/ribbons.html" >
-                        Ribbons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/skeleton.html" >
-                        Skeleton
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="content">
-        <div class="container-xl">
-          <!-- Page title -->
-          <div class="page-header">
-            <div class="row align-items-center">
-              <div class="col">
-                <h2 class="page-title">
-                  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: [
-                	],
-                	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: [
-                	],
-                	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: [
-                	],
-                	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: [
-                	],
-                	xaxis: {
-                		type: "category"
-                	}
-                };
-                (new ApexCharts(document.querySelector("#heatmap-colors"),options)).render();
-              </script>
-            </div>
-          </div>
-        </div>
-        <footer class="footer footer-transparent">
-          <div class="container">
-            <div class="row text-center align-items-center flex-row-reverse">
-              <div class="col-lg-auto ml-lg-auto">
-                <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
-                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
-                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
-                </ul>
-              </div>
-              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
-                <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item">
-                    Copyright © 2020
-                    <a href="." class="link-secondary">Tabler</a>.
-                    All rights reserved.
-                  </li>
-                  <li class="list-inline-item">
-                    <a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </footer>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

demo/colors.html

@@ -0,0 +1,862 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta10
+* @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="./datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          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
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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" >
+                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="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="14" x2="15" y2="14" /></svg>
+                            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">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <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="./faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./users.html">
+                          Users
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./license.html">
+                          License
+                        </a>
+                        <a class="dropdown-item" href="./music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="./tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="./widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="./wizard.html">
+                          Wizard
+                        </a>
+                      </div>
+                    </div>
+                  </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-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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">
+                      1960 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" 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/lifebuoy -->
+                      <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" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./docs/index.html">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="./changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </a>
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="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 project!
+                    </a>
+                  </div>
+                </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 g-2 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-beta10
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js" defer></script>
+    <script src="./dist/js/demo.min.js" defer></script>
+  </body>
+</html>

demo/datatables.html

@@ -0,0 +1,897 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta10
+* @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>Datatables - 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 active" href="./datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          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
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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" >
+                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="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="14" x2="15" y2="14" /></svg>
+                            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">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <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="./faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./users.html">
+                          Users
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./license.html">
+                          License
+                        </a>
+                        <a class="dropdown-item" href="./music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="./tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="./widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="./wizard.html">
+                          Wizard
+                        </a>
+                      </div>
+                    </div>
+                  </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-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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">
+                      1960 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" 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/lifebuoy -->
+                      <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" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./docs/index.html">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="./changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </a>
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="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 project!
+                    </a>
+                  </div>
+                </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 g-2 align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Datatables
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="card">
+              <div class="card-body">
+                <div id="table-default">
+                  <table class="table">
+                    <thead>
+                      <tr>
+                        <th><button class="table-sort" data-sort="sort-name">Name</button></th>
+                        <th><button class="table-sort" data-sort="sort-city">City</button></th>
+                        <th><button class="table-sort" data-sort="sort-type">Type</button></th>
+                        <th><button class="table-sort" data-sort="sort-score">Score</button></th>
+                        <th><button class="table-sort" data-sort="sort-date">Date</button></th>
+                        <th><button class="table-sort" data-sort="sort-quantity">Quantity</button></th>
+                        <th><button class="table-sort" data-sort="sort-progress">Progress</button></th>
+                      </tr>
+                    </thead>
+                    <tbody class="table-tbody">
+                      <tr>
+                        <td class="sort-name">Steel Vengeance</td>
+                        <td class="sort-city">Cedar Point, United States</td>
+                        <td class="sort-type">RMC Hybrid</td>
+                        <td class="sort-score">100,0%</td>
+                        <td class="sort-date" data-date="1628071164">August 04, 2021</td>
+                        <td class="sort-quantity">74</td>
+                        <td class="sort-progress" data-progress="30">
+                          <div class="row align-items-center">
+                            <div class="col-auto">30%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 30%" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" aria-label="30% Complete">
+                                  <span class="visually-hidden">30% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Fury 325</td>
+                        <td class="sort-city">Carowinds, United States</td>
+                        <td class="sort-type">B&M Giga, Hyper, Steel</td>
+                        <td class="sort-score">99,3%</td>
+                        <td class="sort-date" data-date="1546512137">January 03, 2019</td>
+                        <td class="sort-quantity">49</td>
+                        <td class="sort-progress" data-progress="48">
+                          <div class="row align-items-center">
+                            <div class="col-auto">48%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 48%" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" aria-label="48% Complete">
+                                  <span class="visually-hidden">48% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Wildfire</td>
+                        <td class="sort-city">Kolmården  Sweden</td>
+                        <td class="sort-type">RMC Twister, Wooden, Terrain</td>
+                        <td class="sort-score">99,3%</td>
+                        <td class="sort-date" data-date="1546016360">December 28, 2018</td>
+                        <td class="sort-quantity">8</td>
+                        <td class="sort-progress" data-progress="9">
+                          <div class="row align-items-center">
+                            <div class="col-auto">9%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 9%" role="progressbar" aria-valuenow="9" aria-valuemin="0" aria-valuemax="100" aria-label="9% Complete">
+                                  <span class="visually-hidden">9% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Lightning Rod</td>
+                        <td class="sort-city">Dollywood, United States</td>
+                        <td class="sort-type">RMC Wooden</td>
+                        <td class="sort-score">99,1%</td>
+                        <td class="sort-date" data-date="1604704179">November 07, 2020</td>
+                        <td class="sort-quantity">104</td>
+                        <td class="sort-progress" data-progress="98">
+                          <div class="row align-items-center">
+                            <div class="col-auto">98%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 98%" role="progressbar" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100" aria-label="98% Complete">
+                                  <span class="visually-hidden">98% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Maverick</td>
+                        <td class="sort-city">Cedar Point, United States</td>
+                        <td class="sort-type">Intamin Rocket, Steel</td>
+                        <td class="sort-score">99,1%</td>
+                        <td class="sort-date" data-date="1637669424">November 23, 2021</td>
+                        <td class="sort-quantity">86</td>
+                        <td class="sort-progress" data-progress="46">
+                          <div class="row align-items-center">
+                            <div class="col-auto">46%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 46%" role="progressbar" aria-valuenow="46" aria-valuemin="0" aria-valuemax="100" aria-label="46% Complete">
+                                  <span class="visually-hidden">46% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">El Toro</td>
+                        <td class="sort-city">Six Flags Great Adventure, United States</td>
+                        <td class="sort-type">Intamin Twister, Wooden</td>
+                        <td class="sort-score">99,0%</td>
+                        <td class="sort-date" data-date="1610586921">January 14, 2021</td>
+                        <td class="sort-quantity">130</td>
+                        <td class="sort-progress" data-progress="29">
+                          <div class="row align-items-center">
+                            <div class="col-auto">29%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 29%" role="progressbar" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100" aria-label="29% Complete">
+                                  <span class="visually-hidden">29% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Twisted Colossus</td>
+                        <td class="sort-city">Six Flags Magic Mountain, United States</td>
+                        <td class="sort-type">RMC Hybrid</td>
+                        <td class="sort-score">98,9%</td>
+                        <td class="sort-date" data-date="1569399536">September 25, 2019</td>
+                        <td class="sort-quantity">30</td>
+                        <td class="sort-progress" data-progress="57">
+                          <div class="row align-items-center">
+                            <div class="col-auto">57%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 57%" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" aria-label="57% Complete">
+                                  <span class="visually-hidden">57% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Eejanaika new</td>
+                        <td class="sort-city">Fuji-Q Highland, Japan</td>
+                        <td class="sort-type">S&S Power 4th Dimension, Steel</td>
+                        <td class="sort-score">98,6%</td>
+                        <td class="sort-date" data-date="1610794724">January 16, 2021</td>
+                        <td class="sort-quantity">162</td>
+                        <td class="sort-progress" data-progress="91">
+                          <div class="row align-items-center">
+                            <div class="col-auto">91%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 91%" role="progressbar" aria-valuenow="91" aria-valuemin="0" aria-valuemax="100" aria-label="91% Complete">
+                                  <span class="visually-hidden">91% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Wicked Cyclone</td>
+                        <td class="sort-city">Six Flags New England, United States</td>
+                        <td class="sort-type">RMC Hybrid</td>
+                        <td class="sort-score">98,2%</td>
+                        <td class="sort-date" data-date="1568819813">September 18, 2019</td>
+                        <td class="sort-quantity">174</td>
+                        <td class="sort-progress" data-progress="3">
+                          <div class="row align-items-center">
+                            <div class="col-auto">3%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 3%" role="progressbar" aria-valuenow="3" aria-valuemin="0" aria-valuemax="100" aria-label="3% Complete">
+                                  <span class="visually-hidden">3% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Shambhala</td>
+                        <td class="sort-city">Port Aventura, Spain</td>
+                        <td class="sort-type">B&M Hyper, Steel</td>
+                        <td class="sort-score">98,2%</td>
+                        <td class="sort-date" data-date="1538221867">September 29, 2018</td>
+                        <td class="sort-quantity">111</td>
+                        <td class="sort-progress" data-progress="24">
+                          <div class="row align-items-center">
+                            <div class="col-auto">24%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 24%" role="progressbar" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100" aria-label="24% Complete">
+                                  <span class="visually-hidden">24% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Taron</td>
+                        <td class="sort-city">Phantasialand, Germany</td>
+                        <td class="sort-type">Intamin Sit Down, Steel</td>
+                        <td class="sort-score">98,2%</td>
+                        <td class="sort-date" data-date="1592858850">June 22, 2020</td>
+                        <td class="sort-quantity">130</td>
+                        <td class="sort-progress" data-progress="48">
+                          <div class="row align-items-center">
+                            <div class="col-auto">48%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 48%" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" aria-label="48% Complete">
+                                  <span class="visually-hidden">48% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Expedition Ge Force</td>
+                        <td class="sort-city">Holiday Park, Germany</td>
+                        <td class="sort-type">Intamin Megacoaster, Steel</td>
+                        <td class="sort-score">98,2%</td>
+                        <td class="sort-date" data-date="1565107347">August 06, 2019</td>
+                        <td class="sort-quantity">157</td>
+                        <td class="sort-progress" data-progress="57">
+                          <div class="row align-items-center">
+                            <div class="col-auto">57%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 57%" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" aria-label="57% Complete">
+                                  <span class="visually-hidden">57% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Storm Chaser</td>
+                        <td class="sort-city">Kentucky Kingdom, United States</td>
+                        <td class="sort-type">RMC Steel</td>
+                        <td class="sort-score">97,9%</td>
+                        <td class="sort-date" data-date="1564805623">August 03, 2019</td>
+                        <td class="sort-quantity">43</td>
+                        <td class="sort-progress" data-progress="42">
+                          <div class="row align-items-center">
+                            <div class="col-auto">42%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 42%" role="progressbar" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100" aria-label="42% Complete">
+                                  <span class="visually-hidden">42% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Helix</td>
+                        <td class="sort-city">Liseberg, Sweden</td>
+                        <td class="sort-type">Mack Looper, Steel, Terrain</td>
+                        <td class="sort-score">97,9%</td>
+                        <td class="sort-date" data-date="1633500491">October 06, 2021</td>
+                        <td class="sort-quantity">151</td>
+                        <td class="sort-progress" data-progress="54">
+                          <div class="row align-items-center">
+                            <div class="col-auto">54%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 54%" role="progressbar" aria-valuenow="54" aria-valuemin="0" aria-valuemax="100" aria-label="54% Complete">
+                                  <span class="visually-hidden">54% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Outlaw Run</td>
+                        <td class="sort-city">Silver Dollar City, United States</td>
+                        <td class="sort-type">RMC Hybrid</td>
+                        <td class="sort-score">96,6%</td>
+                        <td class="sort-date" data-date="1547084027">January 10, 2019</td>
+                        <td class="sort-quantity">131</td>
+                        <td class="sort-progress" data-progress="64">
+                          <div class="row align-items-center">
+                            <div class="col-auto">64%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 64%" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="64% Complete">
+                                  <span class="visually-hidden">64% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </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-beta10
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/list.js/dist/list.min.js" defer></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js" defer></script>
+    <script src="./dist/js/demo.min.js" defer></script>
+    <script>
+      document.addEventListener("DOMContentLoaded", function() {
+      const list = new List('table-default', {
+      	sortClass: 'table-sort',
+      	listClass: 'table-tbody',
+      	valueNames: [ 'sort-name', 'sort-type', 'sort-city', 'sort-score',
+      		{ attr: 'data-date', name: 'sort-date' },
+      		{ attr: 'data-progress', name: 'sort-progress' },
+      		'sort-quantity'
+      	]
+      });
+      })
+    </script>
+  </body>
+</html>

demo/dist/css/demo.css

@@ -1,9 +1,9 @@
 /*!
-* Tabler v1.0.0-alpha.10 (https://tabler.io)
-* @version 1.0.0-alpha.10
+* Tabler v1.0.0-beta10 (https://tabler.io)
+* @version 1.0.0-beta10
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* 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,
@@ -11,140 +11,479 @@ pre.highlight,
   max-height: 30rem;
   margin: 1.5rem 0;
   overflow: auto;
-  font-size: 85.7142857%;
-  background: #232e3c;
-  border-radius: 3px;
-  color: #ffffff; }
+  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 {
-    width: 6px;
-    height: 6px;
-    -webkit-transition: .3s background;
-    transition: .3s background; }
-  pre.highlight::-webkit-scrollbar-thumb,
-  .highlight pre::-webkit-scrollbar-thumb {
-    border-radius: 5px;
-    background: transparent; }
-  pre.highlight::-webkit-scrollbar-corner,
-  .highlight pre::-webkit-scrollbar-corner {
-    background: transparent; }
-  pre.highlight:hover::-webkit-scrollbar-thumb,
-  .highlight pre:hover::-webkit-scrollbar-thumb {
-    background: #c4c8cf;
-    background: #4f5863; }
+.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 .c, .highlight .c1 {
-  color: #a0aec0; }
-
-.highlight .na, .highlight .nx, .highlight .nl, .language-css .highlight .na, .language-scss .highlight .na {
-  color: #ffe484; }
-
-.highlight .s, .highlight .dl, .highlight .s1, .highlight .s2, .highlight .mh {
-  color: #b5f4a5; }
-
-.highlight .mi, .highlight .language-js .nb, .highlight .nc, .highlight .nd, .highlight .nt {
-  color: #93ddfd; }
-
-.highlight .language-html .nt, .highlight .nb {
-  color: #ff8383; }
-
-.highlight .k, .highlight .kd, .highlight .nv, .highlight .n {
-  color: #d9a9ff; }
+.highlight {
+  margin: 0;
+}
+.highlight code > * {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+.highlight .dl {
+  color: #4070a0;
+}
+.highlight .c {
+  color: #727272;
+}
+.highlight .c1 {
+  color: #727272;
+}
+.highlight .ch {
+  font-style: italic;
+  color: #60a0b0;
+}
+.highlight .cm {
+  color: #727272;
+}
+.highlight .cp {
+  color: #008085;
+}
+.highlight .cpf {
+  color: #007020;
+}
+.highlight .cs {
+  color: #727272;
+}
+.highlight .gd {
+  background-color: #fcc;
+  border: 1px solid #c00;
+}
+.highlight .ge {
+  font-style: italic;
+}
+.highlight .gh {
+  color: #030;
+}
+.highlight .gi {
+  background-color: #cfc;
+  border: 1px solid #0c0;
+}
+.highlight .gl {
+  text-decoration: underline;
+}
+.highlight .go {
+  color: #aaa;
+}
+.highlight .gp {
+  color: #009;
+}
+.highlight .gr {
+  color: #f00;
+}
+.highlight .gs {
+  font-weight: 700;
+}
+.highlight .gt {
+  color: #9c6;
+}
+.highlight .gu {
+  color: #030;
+}
+.highlight .il {
+  color: #c24f19;
+}
+.highlight .k {
+  color: #069;
+}
+.highlight .kc {
+  color: #069;
+}
+.highlight .kd {
+  color: #069;
+}
+.highlight .kn {
+  color: #069;
+}
+.highlight .kp {
+  color: #069;
+}
+.highlight .kr {
+  color: #069;
+}
+.highlight .kt {
+  color: #078;
+}
+.highlight .m {
+  color: #c24f19;
+}
+.highlight .mf {
+  color: #c24f19;
+}
+.highlight .mb {
+  color: #40a070;
+}
+.highlight .mh {
+  color: #c24f19;
+}
+.highlight .mi {
+  color: #c24f19;
+}
+.highlight .mo {
+  color: #c24f19;
+}
+.highlight .na {
+  color: #006ee0;
+}
+.highlight .nb {
+  color: #366;
+}
+.highlight .nc {
+  color: #168174;
+}
+.highlight .nd {
+  color: #6b62de;
+}
+.highlight .ne {
+  color: #c00;
+}
+.highlight .nf {
+  color: #b715f4;
+}
+.highlight .ni {
+  color: #727272;
+}
+.highlight .nl {
+  color: #6b62de;
+}
+.highlight .nn {
+  color: #007ca5;
+}
+.highlight .no {
+  color: #360;
+}
+.highlight .nt {
+  color: #2f6f9f;
+}
+.highlight .nv {
+  color: #033;
+}
+.highlight .o {
+  color: #555;
+}
+.highlight .ow {
+  color: #000;
+}
+.highlight .s {
+  color: #d73038;
+}
+.highlight .s1 {
+  color: #c30;
+}
+.highlight .s2 {
+  color: #c30;
+}
+.highlight .sa {
+  color: #4070a0;
+}
+.highlight .sb {
+  color: #c30;
+}
+.highlight .sc {
+  color: #c30;
+}
+.highlight .sd {
+  font-style: italic;
+  color: #c30;
+}
+.highlight .se {
+  color: #c30;
+}
+.highlight .sh {
+  color: #c30;
+}
+.highlight .si {
+  color: #a00;
+}
+.highlight .sr {
+  color: #337e7e;
+}
+.highlight .ss {
+  color: #fc3;
+}
+.highlight .sx {
+  color: #c30;
+}
+.highlight .w {
+  color: #bbb;
+}
+.highlight .language-bash::before, .highlight .language-sh::before {
+  color: #009;
+  content: "$ ";
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.highlight .language-bash .m, .highlight .language-sh .m {
+  color: inherit;
+}
+.highlight .language-powershell::before {
+  color: #009;
+  content: "PM> ";
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
 
 .example {
   padding: 2rem;
-  margin: 2rem 0;
-  border: 1px solid #e8e9ea;
+  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; }
+  overflow-x: auto;
+}
 
 .example-centered {
-  justify-content: center; }
-  .example-centered .example-content {
-    flex: 0 auto; }
+  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%; }
+  max-width: 100%;
+}
+.example-content .page-header {
+  margin-bottom: 0;
+}
 
 .example-bg {
-  background: #f1f4f8; }
+  background: #f5f7fb;
+}
 
 .example-code {
   margin: 2rem 0;
-  border-top: none; }
-  .example-code pre {
-    margin: 0;
-    border-radius: 0 0 3px 3px; }
-  .example + .example-code {
-    margin-top: -2rem; }
+  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; }
+  margin: 0 auto;
+}
+.example-column > .card:last-of-type {
+  margin-bottom: 0;
+}
 
 .example-column-1 {
-  max-width: 26rem; }
+  max-width: 26rem;
+}
 
 .example-column-2 {
-  max-width: 52rem; }
+  max-width: 52rem;
+}
 
 .example-modal-backdrop {
-  background: #232e3c;
+  background: #1e293b;
   opacity: 0.24;
   position: absolute;
   width: 100%;
   left: 0;
   top: 0;
   height: 100%;
-  border-radius: 2px 2px 0 0; }
+  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: 1px solid #e8e9ea;
-    border-top: none; } }
-
-@media not print and (prefers-color-scheme: dark) {
-  .theme-dark-auto .example-code {
-    border: 1px solid #e8e9ea;
-    border-top: none; } }
-
+    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; }
+  min-height: 316px;
+}
 
 body.no-transitions * {
-  transition: none !important; }
-
-.toc-entry:before {
-  content: '- '; }
-
-.toc-entry ul {
-  list-style: none;
-  padding-left: 1rem; }
+  transition: none !important;
+}
 
 .dropdown-menu-demo {
   display: inline-block;
   width: 100%;
   position: relative;
   top: 0;
-  margin-bottom: 1rem; }
+  margin-bottom: 1rem;
+}
 
 .demo-icon-preview {
   position: -webkit-sticky;
   position: sticky;
-  top: 0; }
-  .demo-icon-preview svg {
-    width: 100%;
-    height: auto;
-    stroke-width: 1.5;
-    max-width: 15rem;
-    margin: 0 auto;
-    display: block; }
+  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-beta10 (https://tabler.io)
+* @version 1.0.0-beta10
+* @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: #f5f7fb;
+}
+
+.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-payments.css

@@ -1,9 +1,9 @@
 /*!
-* Tabler v1.0.0-alpha.10 (https://tabler.io)
-* @version 1.0.0-alpha.10
+* Tabler v1.0.0-beta10 (https://tabler.io)
+* @version 1.0.0-beta10
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* 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 {
@@ -14,378 +14,507 @@
   vertical-align: bottom;
   font-style: normal;
   box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
-  border-radius: 2px; }
+  border-radius: 2px;
+}
 
 .payment-provider-2checkout {
-  background-image: url("../img/payments/2checkout.svg"); }
+  background-image: url("../img/payments/2checkout.svg");
+}
 
 .payment-provider-2checkout-dark {
-  background-image: url("../img/payments/2checkout-dark.svg"); }
+  background-image: url("../img/payments/2checkout-dark.svg");
+}
 
 .payment-provider-alipay {
-  background-image: url("../img/payments/alipay.svg"); }
+  background-image: url("../img/payments/alipay.svg");
+}
 
 .payment-provider-alipay-dark {
-  background-image: url("../img/payments/alipay-dark.svg"); }
+  background-image: url("../img/payments/alipay-dark.svg");
+}
 
 .payment-provider-amazon {
-  background-image: url("../img/payments/amazon.svg"); }
+  background-image: url("../img/payments/amazon.svg");
+}
 
 .payment-provider-amazon-dark {
-  background-image: url("../img/payments/amazon-dark.svg"); }
+  background-image: url("../img/payments/amazon-dark.svg");
+}
 
 .payment-provider-americanexpress {
-  background-image: url("../img/payments/americanexpress.svg"); }
+  background-image: url("../img/payments/americanexpress.svg");
+}
 
 .payment-provider-americanexpress-dark {
-  background-image: url("../img/payments/americanexpress-dark.svg"); }
+  background-image: url("../img/payments/americanexpress-dark.svg");
+}
 
 .payment-provider-applepay {
-  background-image: url("../img/payments/applepay.svg"); }
+  background-image: url("../img/payments/applepay.svg");
+}
 
 .payment-provider-applepay-dark {
-  background-image: url("../img/payments/applepay-dark.svg"); }
+  background-image: url("../img/payments/applepay-dark.svg");
+}
 
 .payment-provider-bancontact {
-  background-image: url("../img/payments/bancontact.svg"); }
+  background-image: url("../img/payments/bancontact.svg");
+}
 
 .payment-provider-bancontact-dark {
-  background-image: url("../img/payments/bancontact-dark.svg"); }
+  background-image: url("../img/payments/bancontact-dark.svg");
+}
 
 .payment-provider-bitcoin {
-  background-image: url("../img/payments/bitcoin.svg"); }
+  background-image: url("../img/payments/bitcoin.svg");
+}
 
 .payment-provider-bitcoin-dark {
-  background-image: url("../img/payments/bitcoin-dark.svg"); }
+  background-image: url("../img/payments/bitcoin-dark.svg");
+}
 
 .payment-provider-bitpay {
-  background-image: url("../img/payments/bitpay.svg"); }
+  background-image: url("../img/payments/bitpay.svg");
+}
 
 .payment-provider-bitpay-dark {
-  background-image: url("../img/payments/bitpay-dark.svg"); }
+  background-image: url("../img/payments/bitpay-dark.svg");
+}
 
 .payment-provider-blik {
-  background-image: url("../img/payments/blik.svg"); }
+  background-image: url("../img/payments/blik.svg");
+}
 
 .payment-provider-blik-dark {
-  background-image: url("../img/payments/blik-dark.svg"); }
+  background-image: url("../img/payments/blik-dark.svg");
+}
 
 .payment-provider-cirrus {
-  background-image: url("../img/payments/cirrus.svg"); }
+  background-image: url("../img/payments/cirrus.svg");
+}
 
 .payment-provider-cirrus-dark {
-  background-image: url("../img/payments/cirrus-dark.svg"); }
+  background-image: url("../img/payments/cirrus-dark.svg");
+}
 
 .payment-provider-clickandbuy {
-  background-image: url("../img/payments/clickandbuy.svg"); }
+  background-image: url("../img/payments/clickandbuy.svg");
+}
 
 .payment-provider-clickandbuy-dark {
-  background-image: url("../img/payments/clickandbuy-dark.svg"); }
+  background-image: url("../img/payments/clickandbuy-dark.svg");
+}
 
 .payment-provider-coinkite {
-  background-image: url("../img/payments/coinkite.svg"); }
+  background-image: url("../img/payments/coinkite.svg");
+}
 
 .payment-provider-coinkite-dark {
-  background-image: url("../img/payments/coinkite-dark.svg"); }
+  background-image: url("../img/payments/coinkite-dark.svg");
+}
 
 .payment-provider-dinersclub {
-  background-image: url("../img/payments/dinersclub.svg"); }
+  background-image: url("../img/payments/dinersclub.svg");
+}
 
 .payment-provider-dinersclub-dark {
-  background-image: url("../img/payments/dinersclub-dark.svg"); }
+  background-image: url("../img/payments/dinersclub-dark.svg");
+}
 
 .payment-provider-directdebit {
-  background-image: url("../img/payments/directdebit.svg"); }
+  background-image: url("../img/payments/directdebit.svg");
+}
 
 .payment-provider-directdebit-dark {
-  background-image: url("../img/payments/directdebit-dark.svg"); }
+  background-image: url("../img/payments/directdebit-dark.svg");
+}
 
 .payment-provider-discover {
-  background-image: url("../img/payments/discover.svg"); }
+  background-image: url("../img/payments/discover.svg");
+}
 
 .payment-provider-discover-dark {
-  background-image: url("../img/payments/discover-dark.svg"); }
+  background-image: url("../img/payments/discover-dark.svg");
+}
 
 .payment-provider-dotpay {
-  background-image: url("../img/payments/dotpay.svg"); }
+  background-image: url("../img/payments/dotpay.svg");
+}
 
 .payment-provider-dotpay-dark {
-  background-image: url("../img/payments/dotpay-dark.svg"); }
+  background-image: url("../img/payments/dotpay-dark.svg");
+}
 
 .payment-provider-dwolla {
-  background-image: url("../img/payments/dwolla.svg"); }
+  background-image: url("../img/payments/dwolla.svg");
+}
 
 .payment-provider-dwolla-dark {
-  background-image: url("../img/payments/dwolla-dark.svg"); }
+  background-image: url("../img/payments/dwolla-dark.svg");
+}
 
 .payment-provider-ebay {
-  background-image: url("../img/payments/ebay.svg"); }
+  background-image: url("../img/payments/ebay.svg");
+}
 
 .payment-provider-ebay-dark {
-  background-image: url("../img/payments/ebay-dark.svg"); }
+  background-image: url("../img/payments/ebay-dark.svg");
+}
 
 .payment-provider-eway {
-  background-image: url("../img/payments/eway.svg"); }
+  background-image: url("../img/payments/eway.svg");
+}
 
 .payment-provider-eway-dark {
-  background-image: url("../img/payments/eway-dark.svg"); }
+  background-image: url("../img/payments/eway-dark.svg");
+}
 
 .payment-provider-giropay {
-  background-image: url("../img/payments/giropay.svg"); }
+  background-image: url("../img/payments/giropay.svg");
+}
 
 .payment-provider-giropay-dark {
-  background-image: url("../img/payments/giropay-dark.svg"); }
+  background-image: url("../img/payments/giropay-dark.svg");
+}
 
 .payment-provider-googlewallet {
-  background-image: url("../img/payments/googlewallet.svg"); }
+  background-image: url("../img/payments/googlewallet.svg");
+}
 
 .payment-provider-googlewallet-dark {
-  background-image: url("../img/payments/googlewallet-dark.svg"); }
+  background-image: url("../img/payments/googlewallet-dark.svg");
+}
 
 .payment-provider-ingenico {
-  background-image: url("../img/payments/ingenico.svg"); }
+  background-image: url("../img/payments/ingenico.svg");
+}
 
 .payment-provider-ingenico-dark {
-  background-image: url("../img/payments/ingenico-dark.svg"); }
+  background-image: url("../img/payments/ingenico-dark.svg");
+}
 
 .payment-provider-jcb {
-  background-image: url("../img/payments/jcb.svg"); }
+  background-image: url("../img/payments/jcb.svg");
+}
 
 .payment-provider-jcb-dark {
-  background-image: url("../img/payments/jcb-dark.svg"); }
+  background-image: url("../img/payments/jcb-dark.svg");
+}
 
 .payment-provider-klarna {
-  background-image: url("../img/payments/klarna.svg"); }
+  background-image: url("../img/payments/klarna.svg");
+}
 
 .payment-provider-klarna-dark {
-  background-image: url("../img/payments/klarna-dark.svg"); }
+  background-image: url("../img/payments/klarna-dark.svg");
+}
 
 .payment-provider-laser {
-  background-image: url("../img/payments/laser.svg"); }
+  background-image: url("../img/payments/laser.svg");
+}
 
 .payment-provider-laser-dark {
-  background-image: url("../img/payments/laser-dark.svg"); }
+  background-image: url("../img/payments/laser-dark.svg");
+}
 
 .payment-provider-maestro {
-  background-image: url("../img/payments/maestro.svg"); }
+  background-image: url("../img/payments/maestro.svg");
+}
 
 .payment-provider-maestro-dark {
-  background-image: url("../img/payments/maestro-dark.svg"); }
+  background-image: url("../img/payments/maestro-dark.svg");
+}
 
 .payment-provider-mastercard {
-  background-image: url("../img/payments/mastercard.svg"); }
+  background-image: url("../img/payments/mastercard.svg");
+}
 
 .payment-provider-mastercard-dark {
-  background-image: url("../img/payments/mastercard-dark.svg"); }
+  background-image: url("../img/payments/mastercard-dark.svg");
+}
 
 .payment-provider-mir {
-  background-image: url("../img/payments/mir.svg"); }
+  background-image: url("../img/payments/mir.svg");
+}
 
 .payment-provider-mir-dark {
-  background-image: url("../img/payments/mir-dark.svg"); }
+  background-image: url("../img/payments/mir-dark.svg");
+}
 
 .payment-provider-monero {
-  background-image: url("../img/payments/monero.svg"); }
+  background-image: url("../img/payments/monero.svg");
+}
 
 .payment-provider-monero-dark {
-  background-image: url("../img/payments/monero-dark.svg"); }
+  background-image: url("../img/payments/monero-dark.svg");
+}
 
 .payment-provider-neteller {
-  background-image: url("../img/payments/neteller.svg"); }
+  background-image: url("../img/payments/neteller.svg");
+}
 
 .payment-provider-neteller-dark {
-  background-image: url("../img/payments/neteller-dark.svg"); }
+  background-image: url("../img/payments/neteller-dark.svg");
+}
 
 .payment-provider-ogone {
-  background-image: url("../img/payments/ogone.svg"); }
+  background-image: url("../img/payments/ogone.svg");
+}
 
 .payment-provider-ogone-dark {
-  background-image: url("../img/payments/ogone-dark.svg"); }
+  background-image: url("../img/payments/ogone-dark.svg");
+}
 
 .payment-provider-okpay {
-  background-image: url("../img/payments/okpay.svg"); }
+  background-image: url("../img/payments/okpay.svg");
+}
 
 .payment-provider-okpay-dark {
-  background-image: url("../img/payments/okpay-dark.svg"); }
+  background-image: url("../img/payments/okpay-dark.svg");
+}
 
 .payment-provider-paybox {
-  background-image: url("../img/payments/paybox.svg"); }
+  background-image: url("../img/payments/paybox.svg");
+}
 
 .payment-provider-paybox-dark {
-  background-image: url("../img/payments/paybox-dark.svg"); }
+  background-image: url("../img/payments/paybox-dark.svg");
+}
 
 .payment-provider-paymill {
-  background-image: url("../img/payments/paymill.svg"); }
+  background-image: url("../img/payments/paymill.svg");
+}
 
 .payment-provider-paymill-dark {
-  background-image: url("../img/payments/paymill-dark.svg"); }
+  background-image: url("../img/payments/paymill-dark.svg");
+}
 
 .payment-provider-payone {
-  background-image: url("../img/payments/payone.svg"); }
+  background-image: url("../img/payments/payone.svg");
+}
 
 .payment-provider-payone-dark {
-  background-image: url("../img/payments/payone-dark.svg"); }
+  background-image: url("../img/payments/payone-dark.svg");
+}
 
 .payment-provider-payoneer {
-  background-image: url("../img/payments/payoneer.svg"); }
+  background-image: url("../img/payments/payoneer.svg");
+}
 
 .payment-provider-payoneer-dark {
-  background-image: url("../img/payments/payoneer-dark.svg"); }
+  background-image: url("../img/payments/payoneer-dark.svg");
+}
 
 .payment-provider-paypal {
-  background-image: url("../img/payments/paypal.svg"); }
+  background-image: url("../img/payments/paypal.svg");
+}
 
 .payment-provider-paypal-dark {
-  background-image: url("../img/payments/paypal-dark.svg"); }
+  background-image: url("../img/payments/paypal-dark.svg");
+}
 
 .payment-provider-paysafecard {
-  background-image: url("../img/payments/paysafecard.svg"); }
+  background-image: url("../img/payments/paysafecard.svg");
+}
 
 .payment-provider-paysafecard-dark {
-  background-image: url("../img/payments/paysafecard-dark.svg"); }
+  background-image: url("../img/payments/paysafecard-dark.svg");
+}
 
 .payment-provider-payu {
-  background-image: url("../img/payments/payu.svg"); }
+  background-image: url("../img/payments/payu.svg");
+}
 
 .payment-provider-payu-dark {
-  background-image: url("../img/payments/payu-dark.svg"); }
+  background-image: url("../img/payments/payu-dark.svg");
+}
 
 .payment-provider-payza {
-  background-image: url("../img/payments/payza.svg"); }
+  background-image: url("../img/payments/payza.svg");
+}
 
 .payment-provider-payza-dark {
-  background-image: url("../img/payments/payza-dark.svg"); }
+  background-image: url("../img/payments/payza-dark.svg");
+}
 
 .payment-provider-przelewy24 {
-  background-image: url("../img/payments/przelewy24.svg"); }
+  background-image: url("../img/payments/przelewy24.svg");
+}
 
 .payment-provider-przelewy24-dark {
-  background-image: url("../img/payments/przelewy24-dark.svg"); }
+  background-image: url("../img/payments/przelewy24-dark.svg");
+}
 
 .payment-provider-ripple {
-  background-image: url("../img/payments/ripple.svg"); }
+  background-image: url("../img/payments/ripple.svg");
+}
 
 .payment-provider-ripple-dark {
-  background-image: url("../img/payments/ripple-dark.svg"); }
+  background-image: url("../img/payments/ripple-dark.svg");
+}
 
 .payment-provider-sage {
-  background-image: url("../img/payments/sage.svg"); }
+  background-image: url("../img/payments/sage.svg");
+}
 
 .payment-provider-sage-dark {
-  background-image: url("../img/payments/sage-dark.svg"); }
+  background-image: url("../img/payments/sage-dark.svg");
+}
 
 .payment-provider-sepa {
-  background-image: url("../img/payments/sepa.svg"); }
+  background-image: url("../img/payments/sepa.svg");
+}
 
 .payment-provider-sepa-dark {
-  background-image: url("../img/payments/sepa-dark.svg"); }
+  background-image: url("../img/payments/sepa-dark.svg");
+}
 
 .payment-provider-shopify {
-  background-image: url("../img/payments/shopify.svg"); }
+  background-image: url("../img/payments/shopify.svg");
+}
 
 .payment-provider-shopify-dark {
-  background-image: url("../img/payments/shopify-dark.svg"); }
+  background-image: url("../img/payments/shopify-dark.svg");
+}
 
 .payment-provider-skrill {
-  background-image: url("../img/payments/skrill.svg"); }
+  background-image: url("../img/payments/skrill.svg");
+}
 
 .payment-provider-skrill-dark {
-  background-image: url("../img/payments/skrill-dark.svg"); }
+  background-image: url("../img/payments/skrill-dark.svg");
+}
 
 .payment-provider-solo {
-  background-image: url("../img/payments/solo.svg"); }
+  background-image: url("../img/payments/solo.svg");
+}
 
 .payment-provider-solo-dark {
-  background-image: url("../img/payments/solo-dark.svg"); }
+  background-image: url("../img/payments/solo-dark.svg");
+}
 
 .payment-provider-square {
-  background-image: url("../img/payments/square.svg"); }
+  background-image: url("../img/payments/square.svg");
+}
 
 .payment-provider-square-dark {
-  background-image: url("../img/payments/square-dark.svg"); }
+  background-image: url("../img/payments/square-dark.svg");
+}
 
 .payment-provider-stripe {
-  background-image: url("../img/payments/stripe.svg"); }
+  background-image: url("../img/payments/stripe.svg");
+}
 
 .payment-provider-stripe-dark {
-  background-image: url("../img/payments/stripe-dark.svg"); }
+  background-image: url("../img/payments/stripe-dark.svg");
+}
 
 .payment-provider-switch {
-  background-image: url("../img/payments/switch.svg"); }
+  background-image: url("../img/payments/switch.svg");
+}
 
 .payment-provider-switch-dark {
-  background-image: url("../img/payments/switch-dark.svg"); }
+  background-image: url("../img/payments/switch-dark.svg");
+}
 
 .payment-provider-tpay {
-  background-image: url("../img/payments/tpay.svg"); }
+  background-image: url("../img/payments/tpay.svg");
+}
 
 .payment-provider-tpay-dark {
-  background-image: url("../img/payments/tpay-dark.svg"); }
+  background-image: url("../img/payments/tpay-dark.svg");
+}
 
 .payment-provider-ukash {
-  background-image: url("../img/payments/ukash.svg"); }
+  background-image: url("../img/payments/ukash.svg");
+}
 
 .payment-provider-ukash-dark {
-  background-image: url("../img/payments/ukash-dark.svg"); }
+  background-image: url("../img/payments/ukash-dark.svg");
+}
 
 .payment-provider-unionpay {
-  background-image: url("../img/payments/unionpay.svg"); }
+  background-image: url("../img/payments/unionpay.svg");
+}
 
 .payment-provider-unionpay-dark {
-  background-image: url("../img/payments/unionpay-dark.svg"); }
+  background-image: url("../img/payments/unionpay-dark.svg");
+}
 
 .payment-provider-verifone {
-  background-image: url("../img/payments/verifone.svg"); }
+  background-image: url("../img/payments/verifone.svg");
+}
 
 .payment-provider-verifone-dark {
-  background-image: url("../img/payments/verifone-dark.svg"); }
+  background-image: url("../img/payments/verifone-dark.svg");
+}
 
 .payment-provider-verisign {
-  background-image: url("../img/payments/verisign.svg"); }
+  background-image: url("../img/payments/verisign.svg");
+}
 
 .payment-provider-verisign-dark {
-  background-image: url("../img/payments/verisign-dark.svg"); }
+  background-image: url("../img/payments/verisign-dark.svg");
+}
 
 .payment-provider-visa {
-  background-image: url("../img/payments/visa.svg"); }
+  background-image: url("../img/payments/visa.svg");
+}
 
 .payment-provider-visa-dark {
-  background-image: url("../img/payments/visa-dark.svg"); }
+  background-image: url("../img/payments/visa-dark.svg");
+}
 
 .payment-provider-webmoney {
-  background-image: url("../img/payments/webmoney.svg"); }
+  background-image: url("../img/payments/webmoney.svg");
+}
 
 .payment-provider-webmoney-dark {
-  background-image: url("../img/payments/webmoney-dark.svg"); }
+  background-image: url("../img/payments/webmoney-dark.svg");
+}
 
 .payment-provider-westernunion {
-  background-image: url("../img/payments/westernunion.svg"); }
+  background-image: url("../img/payments/westernunion.svg");
+}
 
 .payment-provider-westernunion-dark {
-  background-image: url("../img/payments/westernunion-dark.svg"); }
+  background-image: url("../img/payments/westernunion-dark.svg");
+}
 
 .payment-provider-worldpay {
-  background-image: url("../img/payments/worldpay.svg"); }
+  background-image: url("../img/payments/worldpay.svg");
+}
 
 .payment-provider-worldpay-dark {
-  background-image: url("../img/payments/worldpay-dark.svg"); }
+  background-image: url("../img/payments/worldpay-dark.svg");
+}
 
 .payment-xs {
-  width: 2.083325rem;
-  height: 1.25rem; }
+  width: 2.49999rem;
+  height: 1.5rem;
+}
 
 .payment-sm {
   width: 3.33332rem;
-  height: 2rem; }
+  height: 2rem;
+}
 
 .payment-md {
   width: 6.249975rem;
-  height: 3.75rem; }
+  height: 3.75rem;
+}
 
 .payment-lg {
   width: 8.3333rem;
-  height: 5rem; }
+  height: 5rem;
+}
 
 .payment-xl {
   width: 11.66662rem;
-  height: 7rem; }
+  height: 7rem;
+}
+
+.payment-2xl {
+  width: 18.33326rem;
+  height: 11rem;
+}

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

@@ -0,0 +1,520 @@
+/*!
+* Tabler v1.0.0-beta10 (https://tabler.io)
+* @version 1.0.0-beta10
+* @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.49999rem;
+  height: 1.5rem;
+}
+
+.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/js/demo.js

@@ -0,0 +1,151 @@
+/*!
+* Tabler v1.0.0-beta10 (https://tabler.io)
+* @version 1.0.0-beta10
+* @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)
+*/
+(function (factory) {
+  typeof define === 'function' && define.amd ? define(factory) :
+  factory();
+})((function () { 'use strict';
+
+  function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+  }
+
+  function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+  }
+
+  function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+
+    var _s, _e;
+
+    try {
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+        _arr.push(_s.value);
+
+        if (i && _arr.length === i) break;
+      }
+    } catch (err) {
+      _d = true;
+      _e = err;
+    } finally {
+      try {
+        if (!_n && _i["return"] != null) _i["return"]();
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+
+    return _arr;
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+
+  function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  var items = {
+    'theme': {
+      localStorage: 'tablerTheme',
+      default: 'light'
+    },
+    'menu-position': {
+      localStorage: 'tablerMenuPosition',
+      default: 'top'
+    },
+    'menu-behavior': {
+      localStorage: 'tablerMenuBehavior',
+      default: 'sticky'
+    },
+    'container-layout': {
+      localStorage: 'tablerContainerLayout',
+      default: 'boxed'
+    }
+  };
+  var config = {};
+  for (var _i = 0, _Object$entries = Object.entries(items); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+        key = _Object$entries$_i[0],
+        params = _Object$entries$_i[1];
+    var lsParams = localStorage.getItem(params.localStorage);
+    config[key] = lsParams ? lsParams : params.default;
+  }
+  var parseUrl = function parseUrl() {
+    var search = window.location.search.substring(1);
+    var params = search.split('&');
+    for (var i = 0; i < params.length; i++) {
+      var arr = params[i].split('=');
+      var _key = arr[0];
+      var value = arr[1];
+      if (!!items[_key]) {
+        localStorage.setItem(items[_key].localStorage, value);
+        config[_key] = value;
+      }
+    }
+  };
+  var toggleFormControls = function toggleFormControls(form) {
+    for (var _i2 = 0, _Object$entries2 = Object.entries(items); _i2 < _Object$entries2.length; _i2++) {
+      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
+          _key2 = _Object$entries2$_i[0];
+          _Object$entries2$_i[1];
+      var elem = form.querySelector("[name=\"settings-".concat(_key2, "\"][value=\"").concat(config[_key2], "\"]"));
+      if (elem) {
+        elem.checked = true;
+      }
+    }
+  };
+  var updateBodyClasses = function updateBodyClasses() {
+    document.body.classList.remove('theme-dark', 'theme-light');
+    document.body.classList.add("theme-".concat(config.theme));
+  };
+  var submitForm = function submitForm(form) {
+    for (var _i3 = 0, _Object$entries3 = Object.entries(items); _i3 < _Object$entries3.length; _i3++) {
+      var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i3], 2),
+          _key3 = _Object$entries3$_i[0],
+          _params2 = _Object$entries3$_i[1];
+      var value = form.querySelector("[name=\"settings-".concat(_key3, "\"]:checked")).value;
+      localStorage.setItem(_params2.localStorage, value);
+      config[_key3] = value;
+    }
+    updateBodyClasses();
+    window.dispatchEvent(new Event('resize'));
+    new bootstrap.Offcanvas(form).hide();
+  };
+  parseUrl();
+  updateBodyClasses();
+  var form = document.querySelector('#offcanvasSettings');
+  if (form) {
+    form.addEventListener('submit', function (e) {
+      e.preventDefault();
+      submitForm(form);
+    });
+    toggleFormControls(form);
+  }
+
+}));

demo/dist/js/demo.min.js

@@ -0,0 +1,9 @@
+/*!
+* Tabler v1.0.0-beta10 (https://tabler.io)
+* @version 1.0.0-beta10
+* @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)
+*/
+!function(t){"function"==typeof define&&define.amd?define(t):t()}(function(){"use strict";function t(t,r){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null==r)return;var n,o,a=[],l=!0,i=!1;try{for(r=r.call(t);!(l=(n=r.next()).done)&&(a.push(n.value),!e||a.length!==e);l=!0);}catch(t){i=!0,o=t}finally{try{l||null==r.return||r.return()}finally{if(i)throw o}}return a}(t,r)||function(t,r){if(!t)return;if("string"==typeof t)return e(t,r);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(t,r)}(t,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}for(var r={theme:{localStorage:"tablerTheme",default:"light"},"menu-position":{localStorage:"tablerMenuPosition",default:"top"},"menu-behavior":{localStorage:"tablerMenuBehavior",default:"sticky"},"container-layout":{localStorage:"tablerContainerLayout",default:"boxed"}},n={},o=0,a=Object.entries(r);o<a.length;o++){var l=t(a[o],2),i=l[0],c=l[1],u=localStorage.getItem(c.localStorage);n[i]=u||c.default}var f=function(){document.body.classList.remove("theme-dark","theme-light"),document.body.classList.add("theme-".concat(n.theme))};!function(){for(var t=window.location.search.substring(1).split("&"),e=0;e<t.length;e++){var o=t[e].split("="),a=o[0],l=o[1];r[a]&&(localStorage.setItem(r[a].localStorage,l),n[a]=l)}}(),f();var s=document.querySelector("#offcanvasSettings");s&&(s.addEventListener("submit",function(e){e.preventDefault(),function(e){for(var o=0,a=Object.entries(r);o<a.length;o++){var l=t(a[o],2),i=l[0],c=l[1],u=e.querySelector('[name="settings-'.concat(i,'"]:checked')).value;localStorage.setItem(c.localStorage,u),n[i]=u}f(),window.dispatchEvent(new Event("resize")),new bootstrap.Offcanvas(e).hide()}(s)}),function(e){for(var o=0,a=Object.entries(r);o<a.length;o++){var l=t(a[o],2),i=l[0];l[1];var c=e.querySelector('[name="settings-'.concat(i,'"][value="').concat(n[i],'"]'));c&&(c.checked=!0)}}(s))});

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

@@ -13,10 +13,9 @@ var __assign = (this && this.__assign) || function () {
 var CountUp = /** @class */ (function () {
     function CountUp(target, endVal, options) {
         var _this = this;
-        this.target = target;
         this.endVal = endVal;
         this.options = options;
-        this.version = '2.0.7';
+        this.version = '2.1.0';
         this.defaults = {
             startVal: 0,
             decimalPlaces: 0,
@@ -28,7 +27,9 @@ var CountUp = /** @class */ (function () {
             separator: ',',
             decimal: '.',
             prefix: '',
-            suffix: ''
+            suffix: '',
+            enableScrollSpy: false,
+            scrollSpyDelay: 200,
         };
         this.finalEndVal = null; // for smart easing
         this.useEasing = true;
@@ -87,10 +88,10 @@ var CountUp = /** @class */ (function () {
         // default format and easing functions
         this.formatNumber = function (num) {
             var neg = (num < 0) ? '-' : '';
-            var result, x, x1, x2, x3;
+            var result, x1, x2, x3;
             result = Math.abs(num).toFixed(_this.options.decimalPlaces);
             result += '';
-            x = result.split('.');
+            var x = result.split('.');
             x1 = x[0];
             x2 = x.length > 1 ? _this.options.decimal + x[1] : '';
             if (_this.options.useGrouping) {
@@ -135,7 +136,37 @@ var CountUp = /** @class */ (function () {
         else {
             this.error = '[CountUp] target is null or undefined';
         }
+        // scroll spy
+        if (window !== undefined && this.options.enableScrollSpy) {
+            if (!this.error) {
+                // set up global array of onscroll functions
+                window['onScrollFns'] = window['onScrollFns'] || [];
+                window['onScrollFns'].push(function () { return _this.handleScroll(_this); });
+                window.onscroll = function () {
+                    window['onScrollFns'].forEach(function (fn) { return fn(); });
+                };
+                this.handleScroll(this);
+            }
+            else {
+                console.error(this.error, target);
+            }
+        }
     }
+    CountUp.prototype.handleScroll = function (self) {
+        if (!self || !window)
+            return;
+        var bottomOfScroll = window.innerHeight + window.scrollY;
+        var bottomOfEl = self.el.offsetTop + self.el.offsetHeight;
+        if (bottomOfEl < bottomOfScroll && bottomOfEl > window.scrollY && self.paused) {
+            // in view
+            self.paused = false;
+            setTimeout(function () { return self.start(); }, self.options.scrollSpyDelay);
+        }
+        else if (window.scrollY > bottomOfEl && !self.paused) {
+            // scrolled past
+            self.reset();
+        }
+    };
     // determines where easing starts and whether to count down or up
     CountUp.prototype.determineDirectionAndSmartEasing = function () {
         var end = (this.finalEndVal) ? this.finalEndVal : this.endVal;

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

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

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

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

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

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

demo/dist/libs/jqvmap/dist/jqvmap.min.css

@@ -1 +0,0 @@
-.jqvmap-label,.jqvmap-pin{pointer-events:none}.jqvmap-label{position:absolute;display:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:#292929;color:#fff;font-family:sans-serif,Verdana;font-size:smaller;padding:3px}.jqvmap-zoomin,.jqvmap-zoomout{position:absolute;left:10px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:#000;padding:3px;color:#fff;width:10px;height:10px;cursor:pointer;line-height:10px;text-align:center}.jqvmap-zoomin{top:10px}.jqvmap-zoomout{top:30px}.jqvmap-region{cursor:pointer}.jqvmap-ajax_response{width:100%;height:500px}

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

@@ -1,2 +0,0 @@
-/*! nouislider - 14.6.2 - 9/16/2020 */
-.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;right:0;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-origin:0 0;transform-style:flat}.noUi-connect{height:100%;width:100%}.noUi-origin{height:10%;width:10%}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:transform .3s;transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;right:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;right:-6px;top:-17px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#FAFAFA;border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-connects{border-radius:3px}.noUi-connect{background:#3FB8AF}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#B8B8B8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-sub{background:#AAA}.noUi-marker-large{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{-webkit-transform:translate(50%,50%);transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);padding-left:25px}.noUi-rtl .noUi-value-vertical{-webkit-transform:translate(0,50%);transform:translate(0,50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #D9D9D9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%,0);transform:translate(-50%,0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);top:50%;right:120%}.noUi-horizontal .noUi-origin>.noUi-tooltip{-webkit-transform:translate(50%,0);transform:translate(50%,0);left:auto;bottom:10px}.noUi-vertical .noUi-origin>.noUi-tooltip{-webkit-transform:translate(0,-18px);transform:translate(0,-18px);top:auto;right:28px}

demo/dist/libs/peity/jquery.peity.min.js

@@ -1,7 +0,0 @@
-// Peity jQuery plugin version 3.3.0
-// (c) 2018 Ben Pickles
-//
-// http://benpickles.github.io/peity
-//
-// Released under MIT license.
-!function(t,i,e,n){var a=t.fn.peity=function(i,e){return l&&this.each(function(){var n=t(this),h=n.data("_peity");h?(i&&(h.type=i),t.extend(h.opts,e)):(h=new r(n,i,t.extend({},a.defaults[i],n.data("peity"),e)),n.change(function(){h.draw()}).data("_peity",h)),h.draw()}),this},r=function(t,i,e){this.$el=t,this.type=i,this.opts=e},h=r.prototype,s=h.svgElement=function(e,n){return t(i.createElementNS("http://www.w3.org/2000/svg",e)).attr(n)},l="createElementNS"in i&&s("svg",{})[0].createSVGRect;h.draw=function(){var t=this.opts;a.graphers[this.type].call(this,t),t.after&&t.after.call(this,t)},h.fill=function(){var i=this.opts.fill;return t.isFunction(i)?i:function(t,e){return i[e%i.length]}},h.prepare=function(t,i){return this.$svg||this.$el.hide().after(this.$svg=s("svg",{class:"peity"})),this.$svg.empty().data("_peity",this).attr({height:i,width:t})},h.values=function(){return t.map(this.$el.text().split(this.opts.delimiter),function(t){return parseFloat(t)})},a.defaults={},a.graphers={},a.register=function(t,i,e){this.defaults[t]=i,this.graphers[t]=e},a.register("pie",{fill:["#ff9900","#fff4dd","#ffc66e"],radius:8},function(i){if(!i.delimiter){var n=this.$el.text().match(/[^0-9\.]/);i.delimiter=n?n[0]:","}var a=t.map(this.values(),function(t){return t>0?t:0});if("/"==i.delimiter){var r=a[0],h=a[1];a=[r,e.max(0,h-r)]}for(var l=0,p=a.length,o=0;l<p;l++)o+=a[l];o||(p=2,o=1,a=[0,1]);var f=2*i.radius,c=this.prepare(i.width||f,i.height||f),u=c.width()/2,d=c.height()/2,g=e.min(u,d),v=i.innerRadius;"donut"!=this.type||v||(v=.5*g);var m=e.PI,y=this.fill(),w=this.scale=function(t,i){var n=t/o*m*2-m/2;return[i*e.cos(n)+u,i*e.sin(n)+d]},x=0;for(l=0;l<p;l++){var k,$=a[l],j=$/o;if(0!=j){if(1==j)if(v){var A=u-.01,E=d-g,F=d-v;k=s("path",{d:["M",u,E,"A",g,g,0,1,1,A,E,"L",A,F,"A",v,v,0,1,0,u,F].join(" "),"data-value":$})}else k=s("circle",{cx:u,cy:d,"data-value":$,r:g});else{var M=x+$,S=["M"].concat(w(x,g),"A",g,g,0,j>.5?1:0,1,w(M,g),"L");v?S=S.concat(w(M,v),"A",v,v,0,j>.5?1:0,0,w(x,v)):S.push(u,d),x+=$,k=s("path",{d:S.join(" "),"data-value":$})}k.attr("fill",y.call(this,$,l,a)),c.append(k)}}}),a.register("donut",t.extend(!0,{},a.defaults.pie),function(t){a.graphers.pie.call(this,t)}),a.register("line",{delimiter:",",fill:"#c6d9fd",height:16,min:0,stroke:"#4d89f9",strokeWidth:1,width:32},function(t){var i=this.values();1==i.length&&i.push(i[0]);for(var a=e.max.apply(e,t.max==n?i:i.concat(t.max)),r=e.min.apply(e,t.min==n?i:i.concat(t.min)),h=this.prepare(t.width,t.height),l=t.strokeWidth,p=h.width(),o=h.height()-l,f=a-r,c=this.x=function(t){return t*(p/(i.length-1))},u=this.y=function(t){var i=o;return f&&(i-=(t-r)/f*o),i+l/2},d=u(e.max(r,0)),g=[0,d],v=0;v<i.length;v++)g.push(c(v),u(i[v]));g.push(p,d),t.fill&&h.append(s("polygon",{fill:t.fill,points:g.join(" ")})),l&&h.append(s("polyline",{fill:"none",points:g.slice(2,g.length-2).join(" "),stroke:t.stroke,"stroke-width":l,"stroke-linecap":"square"}))}),a.register("bar",{delimiter:",",fill:["#4D89F9"],height:16,min:0,padding:.1,width:32},function(t){for(var i=this.values(),a=e.max.apply(e,t.max==n?i:i.concat(t.max)),r=e.min.apply(e,t.min==n?i:i.concat(t.min)),h=this.prepare(t.width,t.height),l=h.width(),p=h.height(),o=a-r,f=t.padding,c=this.fill(),u=this.x=function(t){return t*l/i.length},d=this.y=function(t){return p-(o?(t-r)/o*p:1)},g=0;g<i.length;g++){var v,m=u(g+f),y=u(g+1-f)-m,w=i[g],x=d(w),k=x,$=x;o?w<0?k=d(e.min(a,0)):$=d(e.max(r,0)):v=1,0==(v=$-k)&&(v=1,a>0&&o&&k--),h.append(s("rect",{"data-value":w,fill:c.call(this,w,g,i),x:m,y:k,width:y,height:v}))}})}(jQuery,document,Math);

demo/dist/libs/selectize/dist/css/selectize.css

@@ -1,333 +0,0 @@
-/**
- * selectize.css (v0.12.6)
- * Copyright (c) 2013–2015 Brian Reavis & contributors
- *
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
- * file except in compliance with the License. You may obtain a copy of the License at:
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
- * ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- *
- * @author Brian Reavis <brian@thirdroute.com>
- */
-
-.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
-  visibility: visible !important;
-  background: #f2f2f2 !important;
-  background: rgba(0, 0, 0, 0.06) !important;
-  border: 0 none !important;
-  -webkit-box-shadow: inset 0 0 12px 4px #fff;
-  box-shadow: inset 0 0 12px 4px #fff;
-}
-.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
-  content: '!';
-  visibility: hidden;
-}
-.selectize-control.plugin-drag_drop .ui-sortable-helper {
-  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
-.selectize-dropdown-header {
-  position: relative;
-  padding: 5px 8px;
-  border-bottom: 1px solid #d0d0d0;
-  background: #f8f8f8;
-  -webkit-border-radius: 3px 3px 0 0;
-  -moz-border-radius: 3px 3px 0 0;
-  border-radius: 3px 3px 0 0;
-}
-.selectize-dropdown-header-close {
-  position: absolute;
-  right: 8px;
-  top: 50%;
-  color: #303030;
-  opacity: 0.4;
-  margin-top: -12px;
-  line-height: 20px;
-  font-size: 20px !important;
-}
-.selectize-dropdown-header-close:hover {
-  color: #000000;
-}
-.selectize-dropdown.plugin-optgroup_columns .optgroup {
-  border-right: 1px solid #f2f2f2;
-  border-top: 0 none;
-  float: left;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
-  border-right: 0 none;
-}
-.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
-  display: none;
-}
-.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
-  border-top: 0 none;
-}
-.selectize-control.plugin-remove_button [data-value] {
-  position: relative;
-  padding-right: 24px !important;
-}
-.selectize-control.plugin-remove_button [data-value] .remove {
-  z-index: 1;
-  /* fixes ie bug (see #392) */
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 17px;
-  text-align: center;
-  font-weight: bold;
-  font-size: 12px;
-  color: inherit;
-  text-decoration: none;
-  vertical-align: middle;
-  display: inline-block;
-  padding: 2px 0 0 0;
-  border-left: 1px solid #d0d0d0;
-  -webkit-border-radius: 0 2px 2px 0;
-  -moz-border-radius: 0 2px 2px 0;
-  border-radius: 0 2px 2px 0;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.selectize-control.plugin-remove_button [data-value] .remove:hover {
-  background: rgba(0, 0, 0, 0.05);
-}
-.selectize-control.plugin-remove_button [data-value].active .remove {
-  border-left-color: #cacaca;
-}
-.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
-  background: none;
-}
-.selectize-control.plugin-remove_button .disabled [data-value] .remove {
-  border-left-color: #ffffff;
-}
-.selectize-control.plugin-remove_button .remove-single {
-  position: absolute;
-  right: 0;
-  top: 0;
-  font-size: 23px;
-}
-.selectize-control {
-  position: relative;
-}
-.selectize-dropdown,
-.selectize-input,
-.selectize-input input {
-  color: #303030;
-  font-family: inherit;
-  font-size: 13px;
-  line-height: 18px;
-  -webkit-font-smoothing: inherit;
-}
-.selectize-input,
-.selectize-control.single .selectize-input.input-active {
-  background: #fff;
-  cursor: text;
-  display: inline-block;
-}
-.selectize-input {
-  border: 1px solid #d0d0d0;
-  padding: 8px 8px;
-  display: inline-block;
-  width: 100%;
-  overflow: hidden;
-  position: relative;
-  z-index: 1;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}
-.selectize-control.multi .selectize-input.has-items {
-  padding: 6px 8px 3px;
-}
-.selectize-input.full {
-  background-color: #fff;
-}
-.selectize-input.disabled,
-.selectize-input.disabled * {
-  cursor: default !important;
-}
-.selectize-input.focus {
-  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
-}
-.selectize-input.dropdown-active {
-  -webkit-border-radius: 3px 3px 0 0;
-  -moz-border-radius: 3px 3px 0 0;
-  border-radius: 3px 3px 0 0;
-}
-.selectize-input > * {
-  vertical-align: baseline;
-  display: -moz-inline-stack;
-  display: inline-block;
-  zoom: 1;
-  *display: inline;
-}
-.selectize-control.multi .selectize-input > div {
-  cursor: pointer;
-  margin: 0 3px 3px 0;
-  padding: 2px 6px;
-  background: #f2f2f2;
-  color: #303030;
-  border: 0 solid #d0d0d0;
-}
-.selectize-control.multi .selectize-input > div.active {
-  background: #e8e8e8;
-  color: #303030;
-  border: 0 solid #cacaca;
-}
-.selectize-control.multi .selectize-input.disabled > div,
-.selectize-control.multi .selectize-input.disabled > div.active {
-  color: #7d7d7d;
-  background: #ffffff;
-  border: 0 solid #ffffff;
-}
-.selectize-input > input {
-  display: inline-block !important;
-  padding: 0 !important;
-  min-height: 0 !important;
-  max-height: none !important;
-  max-width: 100% !important;
-  margin: 0 2px 0 0 !important;
-  text-indent: 0 !important;
-  border: 0 none !important;
-  background: none !important;
-  line-height: inherit !important;
-  -webkit-user-select: auto !important;
-  -webkit-box-shadow: none !important;
-  box-shadow: none !important;
-}
-.selectize-input > input::-ms-clear {
-  display: none;
-}
-.selectize-input > input:focus {
-  outline: none !important;
-}
-.selectize-input::after {
-  content: ' ';
-  display: block;
-  clear: left;
-}
-.selectize-input.dropdown-active::before {
-  content: ' ';
-  display: block;
-  position: absolute;
-  background: #f0f0f0;
-  height: 1px;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-.selectize-dropdown {
-  position: absolute;
-  z-index: 10;
-  border: 1px solid #d0d0d0;
-  background: #fff;
-  margin: -1px 0 0 0;
-  border-top: 0 none;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  -webkit-border-radius: 0 0 3px 3px;
-  -moz-border-radius: 0 0 3px 3px;
-  border-radius: 0 0 3px 3px;
-}
-.selectize-dropdown [data-selectable] {
-  cursor: pointer;
-  overflow: hidden;
-}
-.selectize-dropdown [data-selectable] .highlight {
-  background: rgba(125, 168, 208, 0.2);
-  -webkit-border-radius: 1px;
-  -moz-border-radius: 1px;
-  border-radius: 1px;
-}
-.selectize-dropdown .option,
-.selectize-dropdown .optgroup-header {
-  padding: 5px 8px;
-}
-.selectize-dropdown .option,
-.selectize-dropdown [data-disabled],
-.selectize-dropdown [data-disabled] [data-selectable].option {
-  cursor: inherit;
-  opacity: 0.5;
-}
-.selectize-dropdown [data-selectable].option {
-  opacity: 1;
-}
-.selectize-dropdown .optgroup:first-child .optgroup-header {
-  border-top: 0 none;
-}
-.selectize-dropdown .optgroup-header {
-  color: #303030;
-  background: #fff;
-  cursor: default;
-}
-.selectize-dropdown .active {
-  background-color: #f5fafd;
-  color: #495c68;
-}
-.selectize-dropdown .active.create {
-  color: #495c68;
-}
-.selectize-dropdown .create {
-  color: rgba(48, 48, 48, 0.5);
-}
-.selectize-dropdown-content {
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 200px;
-  -webkit-overflow-scrolling: touch;
-}
-.selectize-control.single .selectize-input,
-.selectize-control.single .selectize-input input {
-  cursor: pointer;
-}
-.selectize-control.single .selectize-input.input-active,
-.selectize-control.single .selectize-input.input-active input {
-  cursor: text;
-}
-.selectize-control.single .selectize-input:after {
-  content: ' ';
-  display: block;
-  position: absolute;
-  top: 50%;
-  right: 15px;
-  margin-top: -3px;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 5px 5px 0 5px;
-  border-color: #808080 transparent transparent transparent;
-}
-.selectize-control.single .selectize-input.dropdown-active:after {
-  margin-top: -4px;
-  border-width: 0 5px 5px 5px;
-  border-color: transparent transparent #808080 transparent;
-}
-.selectize-control.rtl.single .selectize-input:after {
-  left: 15px;
-  right: auto;
-}
-.selectize-control.rtl .selectize-input > input {
-  margin: 0 4px 0 -2px !important;
-}
-.selectize-control .selectize-input.disabled {
-  opacity: 0.5;
-  background-color: #fafafa;
-}

demo/dist/libs/tom-select/dist/js/tom-select.base.min.js

@@ -0,0 +1,303 @@
+/**
+* Tom Select v2.0.1
+* Licensed under the Apache License, Version 2.0 (the "License");
+*/
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).TomSelect=t()}(this,(function(){"use strict"
+function e(e,t){e.split(/\s+/).forEach((e=>{t(e)}))}class t{constructor(){this._events=void 0,this._events={}}on(t,i){e(t,(e=>{this._events[e]=this._events[e]||[],this._events[e].push(i)}))}off(t,i){var s=arguments.length
+0!==s?e(t,(e=>{if(1===s)return delete this._events[e]
+e in this._events!=!1&&this._events[e].splice(this._events[e].indexOf(i),1)})):this._events={}}trigger(t,...i){var s=this
+e(t,(e=>{if(e in s._events!=!1)for(let t of s._events[e])t.apply(s,i)}))}}var i
+const s="[̀-ͯ·ʾ]",n=new RegExp(s,"g")
+var o
+const r={"æ":"ae","ⱥ":"a","ø":"o"},l=new RegExp(Object.keys(r).join("|"),"g"),a=[[67,67],[160,160],[192,438],[452,652],[961,961],[1019,1019],[1083,1083],[1281,1289],[1984,1984],[5095,5095],[7429,7441],[7545,7549],[7680,7935],[8580,8580],[9398,9449],[11360,11391],[42792,42793],[42802,42851],[42873,42897],[42912,42922],[64256,64260],[65313,65338],[65345,65370]],c=e=>e.normalize("NFKD").replace(n,"").toLowerCase().replace(l,(function(e){return r[e]})),d=(e,t="|")=>{if(1==e.length)return e[0]
+var i=1
+return e.forEach((e=>{i=Math.max(i,e.length)})),1==i?"["+e.join("")+"]":"(?:"+e.join(t)+")"},p=e=>{if(1===e.length)return[[e]]
+var t=[]
+return p(e.substring(1)).forEach((function(i){var s=i.slice(0)
+s[0]=e.charAt(0)+s[0],t.push(s),(s=i.slice(0)).unshift(e.charAt(0)),t.push(s)})),t},u=e=>{void 0===o&&(o=(()=>{var e={}
+a.forEach((t=>{for(let s=t[0];s<=t[1];s++){let t=String.fromCharCode(s),n=c(t)
+if(n!=t.toLowerCase()){n in e||(e[n]=[n])
+var i=new RegExp(d(e[n]),"iu")
+t.match(i)||e[n].push(t)}}}))
+var t=Object.keys(e)
+t=t.sort(((e,t)=>t.length-e.length)),i=new RegExp("("+d(t)+"[̀-ͯ·ʾ]*)","g")
+var s={}
+return t.sort(((e,t)=>e.length-t.length)).forEach((t=>{var i=p(t).map((t=>(t=t.map((t=>e.hasOwnProperty(t)?d(e[t]):t)),d(t,""))))
+s[t]=d(i)})),s})())
+return e.normalize("NFKD").toLowerCase().split(i).map((e=>{if(""==e)return""
+const t=c(e)
+if(o.hasOwnProperty(t))return o[t]
+const i=e.normalize("NFC")
+return i!=e?d([e,i]):e})).join("")},h=(e,t)=>{if(e)return e[t]},g=(e,t)=>{if(e){for(var i,s=t.split(".");(i=s.shift())&&(e=e[i]););return e}},v=(e,t,i)=>{var s,n
+return e?-1===(n=(e+="").search(t.regex))?0:(s=t.string.length/e.length,0===n&&(s+=.5),s*i):0},f=e=>(e+"").replace(/([\$\(-\+\.\?\[-\^\{-\}])/g,"\\$1"),m=(e,t)=>{var i=e[t]
+if("function"==typeof i)return i
+i&&!Array.isArray(i)&&(e[t]=[i])},y=(e,t)=>{if(Array.isArray(e))e.forEach(t)
+else for(var i in e)e.hasOwnProperty(i)&&t(e[i],i)},O=(e,t)=>"number"==typeof e&&"number"==typeof t?e>t?1:e<t?-1:0:(e=c(e+"").toLowerCase())>(t=c(t+"").toLowerCase())?1:t>e?-1:0
+class w{constructor(e,t){this.items=void 0,this.settings=void 0,this.items=e,this.settings=t||{diacritics:!0}}tokenize(e,t,i){if(!e||!e.length)return[]
+const s=[],n=e.split(/\s+/)
+var o
+return i&&(o=new RegExp("^("+Object.keys(i).map(f).join("|")+"):(.*)$")),n.forEach((e=>{let i,n=null,r=null
+o&&(i=e.match(o))&&(n=i[1],e=i[2]),e.length>0&&(r=f(e),this.settings.diacritics&&(r=u(r)),t&&(r="\\b"+r)),s.push({string:e,regex:r?new RegExp(r,"iu"):null,field:n})})),s}getScoreFunction(e,t){var i=this.prepareSearch(e,t)
+return this._getScoreFunction(i)}_getScoreFunction(e){const t=e.tokens,i=t.length
+if(!i)return function(){return 0}
+const s=e.options.fields,n=e.weights,o=s.length,r=e.getAttrFn
+if(!o)return function(){return 1}
+const l=1===o?function(e,t){const i=s[0].field
+return v(r(t,i),e,n[i])}:function(e,t){var i=0
+if(e.field){const s=r(t,e.field)
+!e.regex&&s?i+=1/o:i+=v(s,e,1)}else y(n,((s,n)=>{i+=v(r(t,n),e,s)}))
+return i/o}
+return 1===i?function(e){return l(t[0],e)}:"and"===e.options.conjunction?function(e){for(var s,n=0,o=0;n<i;n++){if((s=l(t[n],e))<=0)return 0
+o+=s}return o/i}:function(e){var s=0
+return y(t,(t=>{s+=l(t,e)})),s/i}}getSortFunction(e,t){var i=this.prepareSearch(e,t)
+return this._getSortFunction(i)}_getSortFunction(e){var t,i,s
+const n=this,o=e.options,r=!e.query&&o.sort_empty?o.sort_empty:o.sort,l=[],a=[]
+if("function"==typeof r)return r.bind(this)
+const c=function(t,i){return"$score"===t?i.score:e.getAttrFn(n.items[i.id],t)}
+if(r)for(t=0,i=r.length;t<i;t++)(e.query||"$score"!==r[t].field)&&l.push(r[t])
+if(e.query){for(s=!0,t=0,i=l.length;t<i;t++)if("$score"===l[t].field){s=!1
+break}s&&l.unshift({field:"$score",direction:"desc"})}else for(t=0,i=l.length;t<i;t++)if("$score"===l[t].field){l.splice(t,1)
+break}for(t=0,i=l.length;t<i;t++)a.push("desc"===l[t].direction?-1:1)
+const d=l.length
+if(d){if(1===d){const e=l[0].field,t=a[0]
+return function(i,s){return t*O(c(e,i),c(e,s))}}return function(e,t){var i,s,n
+for(i=0;i<d;i++)if(n=l[i].field,s=a[i]*O(c(n,e),c(n,t)))return s
+return 0}}return null}prepareSearch(e,t){const i={}
+var s=Object.assign({},t)
+if(m(s,"sort"),m(s,"sort_empty"),s.fields){m(s,"fields")
+const e=[]
+s.fields.forEach((t=>{"string"==typeof t&&(t={field:t,weight:1}),e.push(t),i[t.field]="weight"in t?t.weight:1})),s.fields=e}return{options:s,query:e.toLowerCase().trim(),tokens:this.tokenize(e,s.respect_word_boundaries,i),total:0,items:[],weights:i,getAttrFn:s.nesting?g:h}}search(e,t){var i,s,n=this
+s=this.prepareSearch(e,t),t=s.options,e=s.query
+const o=t.score||n._getScoreFunction(s)
+e.length?y(n.items,((e,n)=>{i=o(e),(!1===t.filter||i>0)&&s.items.push({score:i,id:n})})):y(n.items,((e,t)=>{s.items.push({score:1,id:t})}))
+const r=n._getSortFunction(s)
+return r&&s.items.sort(r),s.total=s.items.length,"number"==typeof t.limit&&(s.items=s.items.slice(0,t.limit)),s}}const b=e=>{if(e.jquery)return e[0]
+if(e instanceof HTMLElement)return e
+if(I(e)){let t=document.createElement("div")
+return t.innerHTML=e.trim(),t.firstChild}return document.querySelector(e)},I=e=>"string"==typeof e&&e.indexOf("<")>-1,_=(e,t)=>{var i=document.createEvent("HTMLEvents")
+i.initEvent(t,!0,!1),e.dispatchEvent(i)},S=(e,t)=>{Object.assign(e.style,t)},A=(e,...t)=>{var i=F(t);(e=x(e)).map((e=>{i.map((t=>{e.classList.add(t)}))}))},C=(e,...t)=>{var i=F(t);(e=x(e)).map((e=>{i.map((t=>{e.classList.remove(t)}))}))},F=e=>{var t=[]
+return y(e,(e=>{"string"==typeof e&&(e=e.trim().split(/[\11\12\14\15\40]/)),Array.isArray(e)&&(t=t.concat(e))})),t.filter(Boolean)},x=e=>(Array.isArray(e)||(e=[e]),e),k=(e,t,i)=>{if(!i||i.contains(e))for(;e&&e.matches;){if(e.matches(t))return e
+e=e.parentNode}},L=(e,t=0)=>t>0?e[e.length-1]:e[0],P=(e,t)=>{if(!e)return-1
+t=t||e.nodeName
+for(var i=0;e=e.previousElementSibling;)e.matches(t)&&i++
+return i},E=(e,t)=>{y(t,((t,i)=>{null==t?e.removeAttribute(i):e.setAttribute(i,""+t)}))},T=(e,t)=>{e.parentNode&&e.parentNode.replaceChild(t,e)},V=(e,t)=>{if(null===t)return
+if("string"==typeof t){if(!t.length)return
+t=new RegExp(t,"i")}const i=e=>3===e.nodeType?(e=>{var i=e.data.match(t)
+if(i&&e.data.length>0){var s=document.createElement("span")
+s.className="highlight"
+var n=e.splitText(i.index)
+n.splitText(i[0].length)
+var o=n.cloneNode(!0)
+return s.appendChild(o),T(n,s),1}return 0})(e):((e=>{if(1===e.nodeType&&e.childNodes&&!/(script|style)/i.test(e.tagName)&&("highlight"!==e.className||"SPAN"!==e.tagName))for(var t=0;t<e.childNodes.length;++t)t+=i(e.childNodes[t])})(e),0)
+i(e)},$="undefined"!=typeof navigator&&/Mac/.test(navigator.userAgent)?"metaKey":"ctrlKey"
+var j={options:[],optgroups:[],plugins:[],delimiter:",",splitOn:null,persist:!0,diacritics:!0,create:null,createOnBlur:!1,createFilter:null,highlight:!0,openOnFocus:!0,shouldOpen:null,maxOptions:50,maxItems:null,hideSelected:null,duplicates:!1,addPrecedence:!1,selectOnTab:!1,preload:null,allowEmptyOption:!1,loadThrottle:300,loadingClass:"loading",dataAttr:null,optgroupField:"optgroup",valueField:"value",labelField:"text",disabledField:"disabled",optgroupLabelField:"label",optgroupValueField:"value",lockOptgroupOrder:!1,sortField:"$order",searchField:["text"],searchConjunction:"and",mode:null,wrapperClass:"ts-wrapper",controlClass:"ts-control",dropdownClass:"ts-dropdown",dropdownContentClass:"ts-dropdown-content",itemClass:"item",optionClass:"option",dropdownParent:null,controlInput:'<input type="text" autocomplete="off" size="1" />',copyClassesToDropdown:!1,placeholder:null,hidePlaceholder:null,shouldLoad:function(e){return e.length>0},render:{}}
+const q=e=>null==e?null:D(e),D=e=>"boolean"==typeof e?e?"1":"0":e+"",N=e=>(e+"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"),R=(e,t)=>{var i
+return function(s,n){var o=this
+i&&(o.loading=Math.max(o.loading-1,0),clearTimeout(i)),i=setTimeout((function(){i=null,o.loadedSearches[s]=!0,e.call(o,s,n)}),t)}},H=(e,t,i)=>{var s,n=e.trigger,o={}
+for(s of(e.trigger=function(){var i=arguments[0]
+if(-1===t.indexOf(i))return n.apply(e,arguments)
+o[i]=arguments},i.apply(e,[]),e.trigger=n,t))s in o&&n.apply(e,o[s])},z=(e,t=!1)=>{e&&(e.preventDefault(),t&&e.stopPropagation())},K=(e,t,i,s)=>{e.addEventListener(t,i,s)},M=(e,t)=>!!t&&(!!t[e]&&1===(t.altKey?1:0)+(t.ctrlKey?1:0)+(t.shiftKey?1:0)+(t.metaKey?1:0)),B=(e,t)=>{const i=e.getAttribute("id")
+return i||(e.setAttribute("id",t),t)},Q=e=>e.replace(/[\\"']/g,"\\$&"),G=(e,t)=>{t&&e.append(t)}
+function J(e,t){var i=Object.assign({},j,t),s=i.dataAttr,n=i.labelField,o=i.valueField,r=i.disabledField,l=i.optgroupField,a=i.optgroupLabelField,c=i.optgroupValueField,d=e.tagName.toLowerCase(),p=e.getAttribute("placeholder")||e.getAttribute("data-placeholder")
+if(!p&&!i.allowEmptyOption){let t=e.querySelector('option[value=""]')
+t&&(p=t.textContent)}var u,h,g,v,f,m,O={placeholder:p,options:[],optgroups:[],items:[],maxItems:null}
+return"select"===d?(h=O.options,g={},v=1,f=e=>{var t=Object.assign({},e.dataset),i=s&&t[s]
+return"string"==typeof i&&i.length&&(t=Object.assign(t,JSON.parse(i))),t},m=(e,t)=>{var s=q(e.value)
+if(null!=s&&(s||i.allowEmptyOption)){if(g.hasOwnProperty(s)){if(t){var a=g[s][l]
+a?Array.isArray(a)?a.push(t):g[s][l]=[a,t]:g[s][l]=t}}else{var c=f(e)
+c[n]=c[n]||e.textContent,c[o]=c[o]||s,c[r]=c[r]||e.disabled,c[l]=c[l]||t,c.$option=e,g[s]=c,h.push(c)}e.selected&&O.items.push(s)}},O.maxItems=e.hasAttribute("multiple")?null:1,y(e.children,(e=>{var t,i,s
+"optgroup"===(u=e.tagName.toLowerCase())?((s=f(t=e))[a]=s[a]||t.getAttribute("label")||"",s[c]=s[c]||v++,s[r]=s[r]||t.disabled,O.optgroups.push(s),i=s[c],y(t.children,(e=>{m(e,i)}))):"option"===u&&m(e)}))):(()=>{const t=e.getAttribute(s)
+if(t)O.options=JSON.parse(t),y(O.options,(e=>{O.items.push(e[o])}))
+else{var r=e.value.trim()||""
+if(!i.allowEmptyOption&&!r.length)return
+const t=r.split(i.delimiter)
+y(t,(e=>{const t={}
+t[n]=e,t[o]=e,O.options.push(t)})),O.items=t}})(),Object.assign({},j,O,t)}var U=0
+class W extends(function(e){return e.plugins={},class extends e{constructor(...e){super(...e),this.plugins={names:[],settings:{},requested:{},loaded:{}}}static define(t,i){e.plugins[t]={name:t,fn:i}}initializePlugins(e){var t,i
+const s=this,n=[]
+if(Array.isArray(e))e.forEach((e=>{"string"==typeof e?n.push(e):(s.plugins.settings[e.name]=e.options,n.push(e.name))}))
+else if(e)for(t in e)e.hasOwnProperty(t)&&(s.plugins.settings[t]=e[t],n.push(t))
+for(;i=n.shift();)s.require(i)}loadPlugin(t){var i=this,s=i.plugins,n=e.plugins[t]
+if(!e.plugins.hasOwnProperty(t))throw new Error('Unable to find "'+t+'" plugin')
+s.requested[t]=!0,s.loaded[t]=n.fn.apply(i,[i.plugins.settings[t]||{}]),s.names.push(t)}require(e){var t=this,i=t.plugins
+if(!t.plugins.loaded.hasOwnProperty(e)){if(i.requested[e])throw new Error('Plugin has circular dependency ("'+e+'")')
+t.loadPlugin(e)}return i.loaded[e]}}}(t)){constructor(e,t){var i
+super(),this.control_input=void 0,this.wrapper=void 0,this.dropdown=void 0,this.control=void 0,this.dropdown_content=void 0,this.focus_node=void 0,this.order=0,this.settings=void 0,this.input=void 0,this.tabIndex=void 0,this.is_select_tag=void 0,this.rtl=void 0,this.inputId=void 0,this._destroy=void 0,this.sifter=void 0,this.isOpen=!1,this.isDisabled=!1,this.isRequired=void 0,this.isInvalid=!1,this.isValid=!0,this.isLocked=!1,this.isFocused=!1,this.isInputHidden=!1,this.isSetup=!1,this.ignoreFocus=!1,this.hasOptions=!1,this.currentResults=void 0,this.lastValue="",this.caretPos=0,this.loading=0,this.loadedSearches={},this.activeOption=null,this.activeItems=[],this.optgroups={},this.options={},this.userOptions={},this.items=[],U++
+var s=b(e)
+if(s.tomselect)throw new Error("Tom Select already initialized on this element")
+s.tomselect=this,i=(window.getComputedStyle&&window.getComputedStyle(s,null)).getPropertyValue("direction")
+const n=J(s,t)
+this.settings=n,this.input=s,this.tabIndex=s.tabIndex||0,this.is_select_tag="select"===s.tagName.toLowerCase(),this.rtl=/rtl/i.test(i),this.inputId=B(s,"tomselect-"+U),this.isRequired=s.required,this.sifter=new w(this.options,{diacritics:n.diacritics}),n.mode=n.mode||(1===n.maxItems?"single":"multi"),"boolean"!=typeof n.hideSelected&&(n.hideSelected="multi"===n.mode),"boolean"!=typeof n.hidePlaceholder&&(n.hidePlaceholder="multi"!==n.mode)
+var o=n.createFilter
+"function"!=typeof o&&("string"==typeof o&&(o=new RegExp(o)),o instanceof RegExp?n.createFilter=e=>o.test(e):n.createFilter=()=>!0),this.initializePlugins(n.plugins),this.setupCallbacks(),this.setupTemplates()
+const r=b("<div>"),l=b("<div>"),a=this._render("dropdown"),c=b('<div role="listbox" tabindex="-1">'),d=this.input.getAttribute("class")||"",p=n.mode
+var u
+if(A(r,n.wrapperClass,d,p),A(l,n.controlClass),G(r,l),A(a,n.dropdownClass,p),n.copyClassesToDropdown&&A(a,d),A(c,n.dropdownContentClass),G(a,c),b(n.dropdownParent||r).appendChild(a),I(n.controlInput)){u=b(n.controlInput)
+y(["autocorrect","autocapitalize","autocomplete"],(e=>{s.getAttribute(e)&&E(u,{[e]:s.getAttribute(e)})})),u.tabIndex=-1,l.appendChild(u),this.focus_node=u}else n.controlInput?(u=b(n.controlInput),this.focus_node=u):(u=b("<input/>"),this.focus_node=l)
+this.wrapper=r,this.dropdown=a,this.dropdown_content=c,this.control=l,this.control_input=u,this.setup()}setup(){const e=this,t=e.settings,i=e.control_input,s=e.dropdown,n=e.dropdown_content,o=e.wrapper,r=e.control,l=e.input,a=e.focus_node,c={passive:!0},d=e.inputId+"-ts-dropdown"
+E(n,{id:d}),E(a,{role:"combobox","aria-haspopup":"listbox","aria-expanded":"false","aria-controls":d})
+const p=B(a,e.inputId+"-ts-control"),u="label[for='"+(e=>e.replace(/['"\\]/g,"\\$&"))(e.inputId)+"']",h=document.querySelector(u),g=e.focus.bind(e)
+if(h){K(h,"click",g),E(h,{for:p})
+const t=B(h,e.inputId+"-ts-label")
+E(a,{"aria-labelledby":t}),E(n,{"aria-labelledby":t})}if(o.style.width=l.style.width,e.plugins.names.length){const t="plugin-"+e.plugins.names.join(" plugin-")
+A([o,s],t)}(null===t.maxItems||t.maxItems>1)&&e.is_select_tag&&E(l,{multiple:"multiple"}),e.settings.placeholder&&E(i,{placeholder:t.placeholder}),!e.settings.splitOn&&e.settings.delimiter&&(e.settings.splitOn=new RegExp("\\s*"+f(e.settings.delimiter)+"+\\s*")),t.load&&t.loadThrottle&&(t.load=R(t.load,t.loadThrottle)),e.control_input.type=l.type,K(s,"click",(t=>{const i=k(t.target,"[data-selectable]")
+i&&(e.onOptionSelect(t,i),z(t,!0))})),K(r,"click",(t=>{var s=k(t.target,"[data-ts-item]",r)
+s&&e.onItemSelect(t,s)?z(t,!0):""==i.value&&(e.onClick(),z(t,!0))})),K(a,"keydown",(t=>e.onKeyDown(t))),K(i,"keypress",(t=>e.onKeyPress(t))),K(i,"input",(t=>e.onInput(t))),K(a,"resize",(()=>e.positionDropdown()),c),K(a,"blur",(t=>e.onBlur(t))),K(a,"focus",(t=>e.onFocus(t))),K(a,"paste",(t=>e.onPaste(t)))
+const v=t=>{const n=t.composedPath()[0]
+if(!o.contains(n)&&!s.contains(n))return e.isFocused&&e.blur(),void e.inputState()
+n==i&&e.isOpen?t.stopPropagation():z(t,!0)}
+var m=()=>{e.isOpen&&e.positionDropdown()}
+K(document,"mousedown",v),K(window,"scroll",m,c),K(window,"resize",m,c),this._destroy=()=>{document.removeEventListener("mousedown",v),window.removeEventListener("sroll",m),window.removeEventListener("resize",m),h&&h.removeEventListener("click",g)},this.revertSettings={innerHTML:l.innerHTML,tabIndex:l.tabIndex},l.tabIndex=-1,l.insertAdjacentElement("afterend",e.wrapper),e.sync(!1),t.items=[],delete t.optgroups,delete t.options,K(l,"invalid",(t=>{e.isValid&&(e.isValid=!1,e.isInvalid=!0,e.refreshState())})),e.updateOriginalInput(),e.refreshItems(),e.close(!1),e.inputState(),e.isSetup=!0,l.disabled?e.disable():e.enable(),e.on("change",this.onChange),A(l,"tomselected","ts-hidden-accessible"),e.trigger("initialize"),!0===t.preload&&e.preload()}setupOptions(e=[],t=[]){this.addOptions(e),y(t,(e=>{this.registerOptionGroup(e)}))}setupTemplates(){var e=this,t=e.settings.labelField,i=e.settings.optgroupLabelField,s={optgroup:e=>{let t=document.createElement("div")
+return t.className="optgroup",t.appendChild(e.options),t},optgroup_header:(e,t)=>'<div class="optgroup-header">'+t(e[i])+"</div>",option:(e,i)=>"<div>"+i(e[t])+"</div>",item:(e,i)=>"<div>"+i(e[t])+"</div>",option_create:(e,t)=>'<div class="create">Add <strong>'+t(e.input)+"</strong>&hellip;</div>",no_results:()=>'<div class="no-results">No results found</div>',loading:()=>'<div class="spinner"></div>',not_loading:()=>{},dropdown:()=>"<div></div>"}
+e.settings.render=Object.assign({},s,e.settings.render)}setupCallbacks(){var e,t,i={initialize:"onInitialize",change:"onChange",item_add:"onItemAdd",item_remove:"onItemRemove",item_select:"onItemSelect",clear:"onClear",option_add:"onOptionAdd",option_remove:"onOptionRemove",option_clear:"onOptionClear",optgroup_add:"onOptionGroupAdd",optgroup_remove:"onOptionGroupRemove",optgroup_clear:"onOptionGroupClear",dropdown_open:"onDropdownOpen",dropdown_close:"onDropdownClose",type:"onType",load:"onLoad",focus:"onFocus",blur:"onBlur"}
+for(e in i)(t=this.settings[i[e]])&&this.on(e,t)}sync(e=!0){const t=this,i=e?J(t.input,{delimiter:t.settings.delimiter}):t.settings
+t.setupOptions(i.options,i.optgroups),t.setValue(i.items,!0),t.lastQuery=null}onClick(){var e=this
+if(e.activeItems.length>0)return e.clearActiveItems(),void e.focus()
+e.isFocused&&e.isOpen?e.blur():e.focus()}onMouseDown(){}onChange(){_(this.input,"input"),_(this.input,"change")}onPaste(e){var t=this
+t.isInputHidden||t.isLocked?z(e):t.settings.splitOn&&setTimeout((()=>{var e=t.inputValue()
+if(e.match(t.settings.splitOn)){var i=e.trim().split(t.settings.splitOn)
+y(i,(e=>{t.createItem(e)}))}}),0)}onKeyPress(e){var t=this
+if(!t.isLocked){var i=String.fromCharCode(e.keyCode||e.which)
+return t.settings.create&&"multi"===t.settings.mode&&i===t.settings.delimiter?(t.createItem(),void z(e)):void 0}z(e)}onKeyDown(e){var t=this
+if(t.isLocked)9!==e.keyCode&&z(e)
+else{switch(e.keyCode){case 65:if(M($,e)&&""==t.control_input.value)return z(e),void t.selectAll()
+break
+case 27:return t.isOpen&&(z(e,!0),t.close()),void t.clearActiveItems()
+case 40:if(!t.isOpen&&t.hasOptions)t.open()
+else if(t.activeOption){let e=t.getAdjacent(t.activeOption,1)
+e&&t.setActiveOption(e)}return void z(e)
+case 38:if(t.activeOption){let e=t.getAdjacent(t.activeOption,-1)
+e&&t.setActiveOption(e)}return void z(e)
+case 13:return void(t.canSelect(t.activeOption)?(t.onOptionSelect(e,t.activeOption),z(e)):t.settings.create&&t.createItem()&&z(e))
+case 37:return void t.advanceSelection(-1,e)
+case 39:return void t.advanceSelection(1,e)
+case 9:return void(t.settings.selectOnTab&&(t.canSelect(t.activeOption)&&(t.onOptionSelect(e,t.activeOption),z(e)),t.settings.create&&t.createItem()&&z(e)))
+case 8:case 46:return void t.deleteSelection(e)}t.isInputHidden&&!M($,e)&&z(e)}}onInput(e){var t=this
+if(!t.isLocked){var i=t.inputValue()
+t.lastValue!==i&&(t.lastValue=i,t.settings.shouldLoad.call(t,i)&&t.load(i),t.refreshOptions(),t.trigger("type",i))}}onFocus(e){var t=this,i=t.isFocused
+if(t.isDisabled)return t.blur(),void z(e)
+t.ignoreFocus||(t.isFocused=!0,"focus"===t.settings.preload&&t.preload(),i||t.trigger("focus"),t.activeItems.length||(t.showInput(),t.refreshOptions(!!t.settings.openOnFocus)),t.refreshState())}onBlur(e){if(!1!==document.hasFocus()){var t=this
+if(t.isFocused){t.isFocused=!1,t.ignoreFocus=!1
+var i=()=>{t.close(),t.setActiveItem(),t.setCaret(t.items.length),t.trigger("blur")}
+t.settings.create&&t.settings.createOnBlur?t.createItem(null,!1,i):i()}}}onOptionSelect(e,t){var i,s=this
+t.parentElement&&t.parentElement.matches("[data-disabled]")||(t.classList.contains("create")?s.createItem(null,!0,(()=>{s.settings.closeAfterSelect&&s.close()})):void 0!==(i=t.dataset.value)&&(s.lastQuery=null,s.addItem(i),s.settings.closeAfterSelect&&s.close(),!s.settings.hideSelected&&e.type&&/click/.test(e.type)&&s.setActiveOption(t)))}canSelect(e){return!!(this.isOpen&&e&&this.dropdown_content.contains(e))}onItemSelect(e,t){var i=this
+return!i.isLocked&&"multi"===i.settings.mode&&(z(e),i.setActiveItem(t,e),!0)}canLoad(e){return!!this.settings.load&&!this.loadedSearches.hasOwnProperty(e)}load(e){const t=this
+if(!t.canLoad(e))return
+A(t.wrapper,t.settings.loadingClass),t.loading++
+const i=t.loadCallback.bind(t)
+t.settings.load.call(t,e,i)}loadCallback(e,t){const i=this
+i.loading=Math.max(i.loading-1,0),i.lastQuery=null,i.clearActiveOption(),i.setupOptions(e,t),i.refreshOptions(i.isFocused&&!i.isInputHidden),i.loading||C(i.wrapper,i.settings.loadingClass),i.trigger("load",e,t)}preload(){var e=this.wrapper.classList
+e.contains("preloaded")||(e.add("preloaded"),this.load(""))}setTextboxValue(e=""){var t=this.control_input
+t.value!==e&&(t.value=e,_(t,"update"),this.lastValue=e)}getValue(){return this.is_select_tag&&this.input.hasAttribute("multiple")?this.items:this.items.join(this.settings.delimiter)}setValue(e,t){H(this,t?[]:["change"],(()=>{this.clear(t),this.addItems(e,t)}))}setMaxItems(e){0===e&&(e=null),this.settings.maxItems=e,this.refreshState()}setActiveItem(e,t){var i,s,n,o,r,l,a=this
+if("single"!==a.settings.mode){if(!e)return a.clearActiveItems(),void(a.isFocused&&a.showInput())
+if("click"===(i=t&&t.type.toLowerCase())&&M("shiftKey",t)&&a.activeItems.length){for(l=a.getLastActive(),(n=Array.prototype.indexOf.call(a.control.children,l))>(o=Array.prototype.indexOf.call(a.control.children,e))&&(r=n,n=o,o=r),s=n;s<=o;s++)e=a.control.children[s],-1===a.activeItems.indexOf(e)&&a.setActiveItemClass(e)
+z(t)}else"click"===i&&M($,t)||"keydown"===i&&M("shiftKey",t)?e.classList.contains("active")?a.removeActiveItem(e):a.setActiveItemClass(e):(a.clearActiveItems(),a.setActiveItemClass(e))
+a.hideInput(),a.isFocused||a.focus()}}setActiveItemClass(e){const t=this,i=t.control.querySelector(".last-active")
+i&&C(i,"last-active"),A(e,"active last-active"),t.trigger("item_select",e),-1==t.activeItems.indexOf(e)&&t.activeItems.push(e)}removeActiveItem(e){var t=this.activeItems.indexOf(e)
+this.activeItems.splice(t,1),C(e,"active")}clearActiveItems(){C(this.activeItems,"active"),this.activeItems=[]}setActiveOption(e){e!==this.activeOption&&(this.clearActiveOption(),e&&(this.activeOption=e,E(this.focus_node,{"aria-activedescendant":e.getAttribute("id")}),E(e,{"aria-selected":"true"}),A(e,"active"),this.scrollToOption(e)))}scrollToOption(e,t){if(!e)return
+const i=this.dropdown_content,s=i.clientHeight,n=i.scrollTop||0,o=e.offsetHeight,r=e.getBoundingClientRect().top-i.getBoundingClientRect().top+n
+r+o>s+n?this.scroll(r-s+o,t):r<n&&this.scroll(r,t)}scroll(e,t){const i=this.dropdown_content
+t&&(i.style.scrollBehavior=t),i.scrollTop=e,i.style.scrollBehavior=""}clearActiveOption(){this.activeOption&&(C(this.activeOption,"active"),E(this.activeOption,{"aria-selected":null})),this.activeOption=null,E(this.focus_node,{"aria-activedescendant":null})}selectAll(){const e=this
+if("single"===e.settings.mode)return
+const t=e.controlChildren()
+t.length&&(e.hideInput(),e.close(),e.activeItems=t,y(t,(t=>{e.setActiveItemClass(t)})))}inputState(){var e=this
+e.control.contains(e.control_input)&&(E(e.control_input,{placeholder:e.settings.placeholder}),e.activeItems.length>0||!e.isFocused&&e.settings.hidePlaceholder&&e.items.length>0?(e.setTextboxValue(),e.isInputHidden=!0):(e.settings.hidePlaceholder&&e.items.length>0&&E(e.control_input,{placeholder:""}),e.isInputHidden=!1),e.wrapper.classList.toggle("input-hidden",e.isInputHidden))}hideInput(){this.inputState()}showInput(){this.inputState()}inputValue(){return this.control_input.value.trim()}focus(){var e=this
+e.isDisabled||(e.ignoreFocus=!0,e.control_input.offsetWidth?e.control_input.focus():e.focus_node.focus(),setTimeout((()=>{e.ignoreFocus=!1,e.onFocus()}),0))}blur(){this.focus_node.blur(),this.onBlur()}getScoreFunction(e){return this.sifter.getScoreFunction(e,this.getSearchOptions())}getSearchOptions(){var e=this.settings,t=e.sortField
+return"string"==typeof e.sortField&&(t=[{field:e.sortField}]),{fields:e.searchField,conjunction:e.searchConjunction,sort:t,nesting:e.nesting}}search(e){var t,i,s,n=this,o=this.getSearchOptions()
+if(n.settings.score&&"function"!=typeof(s=n.settings.score.call(n,e)))throw new Error('Tom Select "score" setting must be a function that returns a function')
+if(e!==n.lastQuery?(n.lastQuery=e,i=n.sifter.search(e,Object.assign(o,{score:s})),n.currentResults=i):i=Object.assign({},n.currentResults),n.settings.hideSelected)for(t=i.items.length-1;t>=0;t--){let e=q(i.items[t].id)
+e&&-1!==n.items.indexOf(e)&&i.items.splice(t,1)}return i}refreshOptions(e=!0){var t,i,s,n,o,r,l,a,c,d,p
+const u={},h=[]
+var g,v=this,f=v.inputValue(),m=v.search(f),O=null,w=v.settings.shouldOpen||!1,b=v.dropdown_content
+for(v.activeOption&&(c=v.activeOption.dataset.value,d=v.activeOption.closest("[data-group]")),n=m.items.length,"number"==typeof v.settings.maxOptions&&(n=Math.min(n,v.settings.maxOptions)),n>0&&(w=!0),t=0;t<n;t++){let e=m.items[t].id,n=v.options[e],l=v.getOption(e,!0)
+for(v.settings.hideSelected||l.classList.toggle("selected",v.items.includes(e)),o=n[v.settings.optgroupField]||"",i=0,s=(r=Array.isArray(o)?o:[o])&&r.length;i<s;i++)o=r[i],v.optgroups.hasOwnProperty(o)||(o=""),u.hasOwnProperty(o)||(u[o]=document.createDocumentFragment(),h.push(o)),i>0&&(l=l.cloneNode(!0),E(l,{id:n.$id+"-clone-"+i,"aria-selected":null}),l.classList.add("ts-cloned"),C(l,"active")),O||c!=e||(d?d.dataset.group===o&&(O=l):O=l),u[o].appendChild(l)}this.settings.lockOptgroupOrder&&h.sort(((e,t)=>(v.optgroups[e]&&v.optgroups[e].$order||0)-(v.optgroups[t]&&v.optgroups[t].$order||0))),l=document.createDocumentFragment(),y(h,(e=>{if(v.optgroups.hasOwnProperty(e)&&u[e].children.length){let t=document.createDocumentFragment(),i=v.render("optgroup_header",v.optgroups[e])
+G(t,i),G(t,u[e])
+let s=v.render("optgroup",{group:v.optgroups[e],options:t})
+G(l,s)}else G(l,u[e])})),b.innerHTML="",G(b,l),v.settings.highlight&&(g=b.querySelectorAll("span.highlight"),Array.prototype.forEach.call(g,(function(e){var t=e.parentNode
+t.replaceChild(e.firstChild,e),t.normalize()})),m.query.length&&m.tokens.length&&y(m.tokens,(e=>{V(b,e.regex)})))
+var I=e=>{let t=v.render(e,{input:f})
+return t&&(w=!0,b.insertBefore(t,b.firstChild)),t}
+if(v.loading?I("loading"):v.settings.shouldLoad.call(v,f)?0===m.items.length&&I("no_results"):I("not_loading"),(a=v.canCreate(f))&&(p=I("option_create")),v.hasOptions=m.items.length>0||a,w){if(m.items.length>0){if(!O&&"single"===v.settings.mode&&v.items.length&&(O=v.getOption(v.items[0])),!b.contains(O)){let e=0
+p&&!v.settings.addPrecedence&&(e=1),O=v.selectable()[e]}}else p&&(O=p)
+e&&!v.isOpen&&(v.open(),v.scrollToOption(O,"auto")),v.setActiveOption(O)}else v.clearActiveOption(),e&&v.isOpen&&v.close(!1)}selectable(){return this.dropdown_content.querySelectorAll("[data-selectable]")}addOption(e,t=!1){const i=this
+if(Array.isArray(e))return i.addOptions(e,t),!1
+const s=q(e[i.settings.valueField])
+return null!==s&&!i.options.hasOwnProperty(s)&&(e.$order=e.$order||++i.order,e.$id=i.inputId+"-opt-"+e.$order,i.options[s]=e,i.lastQuery=null,t&&(i.userOptions[s]=t,i.trigger("option_add",s,e)),s)}addOptions(e,t=!1){y(e,(e=>{this.addOption(e,t)}))}registerOption(e){return this.addOption(e)}registerOptionGroup(e){var t=q(e[this.settings.optgroupValueField])
+return null!==t&&(e.$order=e.$order||++this.order,this.optgroups[t]=e,t)}addOptionGroup(e,t){var i
+t[this.settings.optgroupValueField]=e,(i=this.registerOptionGroup(t))&&this.trigger("optgroup_add",i,t)}removeOptionGroup(e){this.optgroups.hasOwnProperty(e)&&(delete this.optgroups[e],this.clearCache(),this.trigger("optgroup_remove",e))}clearOptionGroups(){this.optgroups={},this.clearCache(),this.trigger("optgroup_clear")}updateOption(e,t){const i=this
+var s,n
+const o=q(e),r=q(t[i.settings.valueField])
+if(null===o)return
+if(!i.options.hasOwnProperty(o))return
+if("string"!=typeof r)throw new Error("Value must be set in option data")
+const l=i.getOption(o),a=i.getItem(o)
+if(t.$order=t.$order||i.options[o].$order,delete i.options[o],i.uncacheValue(r),i.options[r]=t,l){if(i.dropdown_content.contains(l)){const e=i._render("option",t)
+T(l,e),i.activeOption===l&&i.setActiveOption(e)}l.remove()}a&&(-1!==(n=i.items.indexOf(o))&&i.items.splice(n,1,r),s=i._render("item",t),a.classList.contains("active")&&A(s,"active"),T(a,s)),i.lastQuery=null}removeOption(e,t){const i=this
+e=D(e),i.uncacheValue(e),delete i.userOptions[e],delete i.options[e],i.lastQuery=null,i.trigger("option_remove",e),i.removeItem(e,t)}clearOptions(){this.loadedSearches={},this.userOptions={},this.clearCache()
+var e={}
+y(this.options,((t,i)=>{this.items.indexOf(i)>=0&&(e[i]=this.options[i])})),this.options=this.sifter.items=e,this.lastQuery=null,this.trigger("option_clear")}getOption(e,t=!1){const i=q(e)
+if(null!==i&&this.options.hasOwnProperty(i)){const e=this.options[i]
+if(e.$div)return e.$div
+if(t)return this._render("option",e)}return null}getAdjacent(e,t,i="option"){var s
+if(!e)return null
+s="item"==i?this.controlChildren():this.dropdown_content.querySelectorAll("[data-selectable]")
+for(let i=0;i<s.length;i++)if(s[i]==e)return t>0?s[i+1]:s[i-1]
+return null}getItem(e){if("object"==typeof e)return e
+var t=q(e)
+return null!==t?this.control.querySelector(`[data-value="${Q(t)}"]`):null}addItems(e,t){var i=this,s=Array.isArray(e)?e:[e]
+for(let e=0,n=(s=s.filter((e=>-1===i.items.indexOf(e)))).length;e<n;e++)i.isPending=e<n-1,i.addItem(s[e],t)}addItem(e,t){H(this,t?[]:["change","dropdown_close"],(()=>{var i,s
+const n=this,o=n.settings.mode,r=q(e)
+if((!r||-1===n.items.indexOf(r)||("single"===o&&n.close(),"single"!==o&&n.settings.duplicates))&&null!==r&&n.options.hasOwnProperty(r)&&("single"===o&&n.clear(t),"multi"!==o||!n.isFull())){if(i=n._render("item",n.options[r]),n.control.contains(i)&&(i=i.cloneNode(!0)),s=n.isFull(),n.items.splice(n.caretPos,0,r),n.insertAtCaret(i),n.isSetup){if(!n.isPending&&n.settings.hideSelected){let e=n.getOption(r),t=n.getAdjacent(e,1)
+t&&n.setActiveOption(t)}n.isPending||n.settings.closeAfterSelect||n.refreshOptions(n.isFocused&&"single"!==o),0!=n.settings.closeAfterSelect&&n.isFull()?n.close():n.isPending||n.positionDropdown(),n.trigger("item_add",r,i),n.isPending||n.updateOriginalInput({silent:t})}(!n.isPending||!s&&n.isFull())&&(n.inputState(),n.refreshState())}}))}removeItem(e=null,t){const i=this
+if(!(e=i.getItem(e)))return
+var s,n
+const o=e.dataset.value
+s=P(e),e.remove(),e.classList.contains("active")&&(n=i.activeItems.indexOf(e),i.activeItems.splice(n,1),C(e,"active")),i.items.splice(s,1),i.lastQuery=null,!i.settings.persist&&i.userOptions.hasOwnProperty(o)&&i.removeOption(o,t),s<i.caretPos&&i.setCaret(i.caretPos-1),i.updateOriginalInput({silent:t}),i.refreshState(),i.positionDropdown(),i.trigger("item_remove",o,e)}createItem(e=null,t=!0,i=(()=>{})){var s,n=this,o=n.caretPos
+if(e=e||n.inputValue(),!n.canCreate(e))return i(),!1
+n.lock()
+var r=!1,l=e=>{if(n.unlock(),!e||"object"!=typeof e)return i()
+var t=q(e[n.settings.valueField])
+if("string"!=typeof t)return i()
+n.setTextboxValue(),n.addOption(e,!0),n.setCaret(o),n.addItem(t),i(e),r=!0}
+return s="function"==typeof n.settings.create?n.settings.create.call(this,e,l):{[n.settings.labelField]:e,[n.settings.valueField]:e},r||l(s),!0}refreshItems(){var e=this
+e.lastQuery=null,e.isSetup&&e.addItems(e.items),e.updateOriginalInput(),e.refreshState()}refreshState(){const e=this
+e.refreshValidityState()
+const t=e.isFull(),i=e.isLocked
+e.wrapper.classList.toggle("rtl",e.rtl)
+const s=e.wrapper.classList
+var n
+s.toggle("focus",e.isFocused),s.toggle("disabled",e.isDisabled),s.toggle("required",e.isRequired),s.toggle("invalid",!e.isValid),s.toggle("locked",i),s.toggle("full",t),s.toggle("input-active",e.isFocused&&!e.isInputHidden),s.toggle("dropdown-active",e.isOpen),s.toggle("has-options",(n=e.options,0===Object.keys(n).length)),s.toggle("has-items",e.items.length>0)}refreshValidityState(){var e=this
+e.input.checkValidity&&(e.isValid=e.input.checkValidity(),e.isInvalid=!e.isValid)}isFull(){return null!==this.settings.maxItems&&this.items.length>=this.settings.maxItems}updateOriginalInput(e={}){const t=this
+var i,s
+const n=t.input.querySelector('option[value=""]')
+if(t.is_select_tag){const e=[],r=t.input.querySelectorAll("option:checked").length
+function o(i,s,o){return i||(i=b('<option value="'+N(s)+'">'+N(o)+"</option>")),i!=n&&t.input.append(i),e.push(i),(i!=n||r>0)&&(i.selected=!0),i}t.input.querySelectorAll("option:checked").forEach((e=>{e.selected=!1})),0==t.items.length&&"single"==t.settings.mode?o(n,"",""):t.items.forEach((n=>{if(i=t.options[n],s=i[t.settings.labelField]||"",e.includes(i.$option)){o(t.input.querySelector(`option[value="${Q(n)}"]:not(:checked)`),n,s)}else i.$option=o(i.$option,n,s)}))}else t.input.value=t.getValue()
+t.isSetup&&(e.silent||t.trigger("change",t.getValue()))}open(){var e=this
+e.isLocked||e.isOpen||"multi"===e.settings.mode&&e.isFull()||(e.isOpen=!0,E(e.focus_node,{"aria-expanded":"true"}),e.refreshState(),S(e.dropdown,{visibility:"hidden",display:"block"}),e.positionDropdown(),S(e.dropdown,{visibility:"visible",display:"block"}),e.focus(),e.trigger("dropdown_open",e.dropdown))}close(e=!0){var t=this,i=t.isOpen
+e&&(t.setTextboxValue(),"single"===t.settings.mode&&t.items.length&&t.hideInput()),t.isOpen=!1,E(t.focus_node,{"aria-expanded":"false"}),S(t.dropdown,{display:"none"}),t.settings.hideSelected&&t.clearActiveOption(),t.refreshState(),i&&t.trigger("dropdown_close",t.dropdown)}positionDropdown(){if("body"===this.settings.dropdownParent){var e=this.control,t=e.getBoundingClientRect(),i=e.offsetHeight+t.top+window.scrollY,s=t.left+window.scrollX
+S(this.dropdown,{width:t.width+"px",top:i+"px",left:s+"px"})}}clear(e){var t=this
+if(t.items.length){var i=t.controlChildren()
+y(i,(e=>{t.removeItem(e,!0)})),t.showInput(),e||t.updateOriginalInput(),t.trigger("clear")}}insertAtCaret(e){const t=this,i=t.caretPos,s=t.control
+s.insertBefore(e,s.children[i]),t.setCaret(i+1)}deleteSelection(e){var t,i,s,n,o,r=this
+t=e&&8===e.keyCode?-1:1,i={start:(o=r.control_input).selectionStart||0,length:(o.selectionEnd||0)-(o.selectionStart||0)}
+const l=[]
+if(r.activeItems.length)n=L(r.activeItems,t),s=P(n),t>0&&s++,y(r.activeItems,(e=>l.push(e)))
+else if((r.isFocused||"single"===r.settings.mode)&&r.items.length){const e=r.controlChildren()
+t<0&&0===i.start&&0===i.length?l.push(e[r.caretPos-1]):t>0&&i.start===r.inputValue().length&&l.push(e[r.caretPos])}const a=l.map((e=>e.dataset.value))
+if(!a.length||"function"==typeof r.settings.onDelete&&!1===r.settings.onDelete.call(r,a,e))return!1
+for(z(e,!0),void 0!==s&&r.setCaret(s);l.length;)r.removeItem(l.pop())
+return r.showInput(),r.positionDropdown(),r.refreshOptions(!1),!0}advanceSelection(e,t){var i,s,n=this
+n.rtl&&(e*=-1),n.inputValue().length||(M($,t)||M("shiftKey",t)?(s=(i=n.getLastActive(e))?i.classList.contains("active")?n.getAdjacent(i,e,"item"):i:e>0?n.control_input.nextElementSibling:n.control_input.previousElementSibling)&&(s.classList.contains("active")&&n.removeActiveItem(i),n.setActiveItemClass(s)):n.moveCaret(e))}moveCaret(e){}getLastActive(e){let t=this.control.querySelector(".last-active")
+if(t)return t
+var i=this.control.querySelectorAll(".active")
+return i?L(i,e):void 0}setCaret(e){this.caretPos=this.items.length}controlChildren(){return Array.from(this.control.querySelectorAll("[data-ts-item]"))}lock(){this.isLocked=!0,this.refreshState()}unlock(){this.isLocked=!1,this.refreshState()}disable(){var e=this
+e.input.disabled=!0,e.control_input.disabled=!0,e.focus_node.tabIndex=-1,e.isDisabled=!0,this.close(),e.lock()}enable(){var e=this
+e.input.disabled=!1,e.control_input.disabled=!1,e.focus_node.tabIndex=e.tabIndex,e.isDisabled=!1,e.unlock()}destroy(){var e=this,t=e.revertSettings
+e.trigger("destroy"),e.off(),e.wrapper.remove(),e.dropdown.remove(),e.input.innerHTML=t.innerHTML,e.input.tabIndex=t.tabIndex,C(e.input,"tomselected","ts-hidden-accessible"),e._destroy(),delete e.input.tomselect}render(e,t){return"function"!=typeof this.settings.render[e]?null:this._render(e,t)}_render(e,t){var i,s,n=""
+const o=this
+return"option"!==e&&"item"!=e||(n=D(t[o.settings.valueField])),null==(s=o.settings.render[e].call(this,t,N))||(s=b(s),"option"===e||"option_create"===e?t[o.settings.disabledField]?E(s,{"aria-disabled":"true"}):E(s,{"data-selectable":""}):"optgroup"===e&&(i=t.group[o.settings.optgroupValueField],E(s,{"data-group":i}),t.group[o.settings.disabledField]&&E(s,{"data-disabled":""})),"option"!==e&&"item"!==e||(E(s,{"data-value":n}),"item"===e?(A(s,o.settings.itemClass),E(s,{"data-ts-item":""})):(A(s,o.settings.optionClass),E(s,{role:"option",id:t.$id}),o.options[n].$div=s))),s}clearCache(){y(this.options,((e,t)=>{e.$div&&(e.$div.remove(),delete e.$div)}))}uncacheValue(e){const t=this.getOption(e)
+t&&t.remove()}canCreate(e){return this.settings.create&&e.length>0&&this.settings.createFilter.call(this,e)}hook(e,t,i){var s=this,n=s[t]
+s[t]=function(){var t,o
+return"after"===e&&(t=n.apply(s,arguments)),o=i.apply(s,arguments),"instead"===e?o:("before"===e&&(t=n.apply(s,arguments)),t)}}}return W}))
+var tomSelect=function(e,t){return new TomSelect(e,t)}
+//# sourceMappingURL=tom-select.base.min.js.map

demo/docs/browser-support.html

@@ -0,0 +1,933 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta10
+* @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>Browser Support - 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="../datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          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
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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" >
+                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="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="14" x2="15" y2="14" /></svg>
+                            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">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <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="../faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </a>
+                        <a class="dropdown-item" href="../users.html">
+                          Users
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../license.html">
+                          License
+                        </a>
+                        <a class="dropdown-item" href="../music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="../tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </a>
+                        <a class="dropdown-item" href="../uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="../widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="../wizard.html">
+                          Wizard
+                        </a>
+                      </div>
+                    </div>
+                  </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-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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">
+                      1960 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" 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/lifebuoy -->
+                      <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" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="../docs/index.html">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="../changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </a>
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="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 project!
+                    </a>
+                  </div>
+                </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 g-2 align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Documentation
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="row gx-lg-5">
+              <div class="d-none d-lg-block col-lg-3">
+                <ul class="nav nav-pills nav-vertical">
+                  <li class="nav-item">
+                    <a href="../docs/" class="nav-link">
+                      Introduction
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
+                      Getting started
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse show" id="menu-base">
+                      <li class="nav-item">
+                        <a href="../docs/getting-started.html" class="nav-link">
+                          Getting Started
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/download.html" class="nav-link">
+                          Download
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/browser-support.html" class="nav-link active">
+                          Browser Support
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                      Content
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse" id="menu-content">
+                      <li class="nav-item">
+                        <a href="../docs/colors.html" class="nav-link">
+                          Colors
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/typography.html" class="nav-link">
+                          Typography
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/icons.html" class="nav-link">
+                          Icons
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/customize.html" class="nav-link">
+                          Customize Tabler
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-layout" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                      Layout
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse" id="menu-layout">
+                      <li class="nav-item">
+                        <a href="../docs/page-headers.html" class="nav-link">
+                          Page headers
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                      Form components
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse" id="menu-forms">
+                      <li class="nav-item">
+                        <a href="../docs/form-elements.html" class="nav-link">
+                          Form elements
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/form-helpers.html" class="nav-link">
+                          Form helpers
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/form-validation.html" class="nav-link">
+                          Validation states
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/form-image-check.html" class="nav-link">
+                          Image check
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/form-color-check.html" class="nav-link">
+                          Color check
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/form-selectboxes.html" class="nav-link">
+                          Form selectboxes
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/form-fieldset.html" class="nav-link">
+                          Form fieldset
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                      Components
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse" id="menu-components">
+                      <li class="nav-item">
+                        <a href="../docs/alerts.html" class="nav-link">
+                          Alerts
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/avatars.html" class="nav-link">
+                          Avatars
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/badges.html" class="nav-link">
+                          Badges
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/breadcrumb.html" class="nav-link">
+                          Breadcrumb
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/buttons.html" class="nav-link">
+                          Buttons
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/cards.html" class="nav-link">
+                          Cards
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/carousel.html" class="nav-link">
+                          Carousel
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/dropdowns.html" class="nav-link">
+                          Dropdowns
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/divider.html" class="nav-link">
+                          Divider
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/empty.html" class="nav-link">
+                          Empty states
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/modals.html" class="nav-link">
+                          Modals
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/page-headers.html" class="nav-link">
+                          Page headers
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/progress.html" class="nav-link">
+                          Progress
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/range-slider.html" class="nav-link">
+                          Range slider
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/ribbons.html" class="nav-link">
+                          Ribbons
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/spinners.html" class="nav-link">
+                          Spinners
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/steps.html" class="nav-link">
+                          Steps
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/switch-icon.html" class="nav-link">
+                          Switch icon
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/tables.html" class="nav-link">
+                          Tables
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/tabs.html" class="nav-link">
+                          Tabs
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/timelines.html" class="nav-link">
+                          Timelines
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/toasts.html" class="nav-link">
+                          Toasts
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/tooltips.html" class="nav-link">
+                          Tooltips
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                      Utilities
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse" id="menu-utils">
+                      <li class="nav-item">
+                        <a href="../docs/borders.html" class="nav-link">
+                          Borders
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/cursors.html" class="nav-link">
+                          Cursors
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/interactions.html" class="nav-link">
+                          Interactions
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                      Plugins
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse" id="menu-plugins">
+                      <li class="nav-item">
+                        <a href="../docs/autosize.html" class="nav-link">
+                          Autosize
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/input-mask.html" class="nav-link">
+                          Form input mask
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/flags.html" class="nav-link">
+                          Flags
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/payments.html" class="nav-link">
+                          Payments
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/charts.html" class="nav-link">
+                          Charts
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="../changelog.html" class="nav-link">
+                      Changelog
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta10</span>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div class="col-lg-9">
+                <div class="card card-lg">
+                  <div class="card-body">
+                    <div class="markdown">
+                      <div>
+                        <div class="d-flex mb-3">
+                          <h1 class="m-0">Browser Support</h1>
+                        </div>
+                      </div>
+                      <p>As of this latest release, Tabler has launched many new features that may not be compatible with all browsers, especially older ones.</p>
+                      <p>For instance, Tabler no longer uses <strong>vendor prefixes</strong> in styles that are known to have some compatibility issues except for a few parts. Tabler also supports new features such as <strong>CSS grid</strong>, <strong>object fit</strong>, and <strong>sticky positioning</strong> which is not yet supported on all browsers. In short, Tabler supports all the latest supported browsers with <strong>only</strong> partial support for Internet Explorer.</p>
+                      <h2 id="supported-browsers">Supported Browsers</h2>
+                      <table>
+                        <thead>
+                          <tr>
+                            <th>Browser</th>
+                            <th>Version</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr>
+                            <td><img src="/static/browsers/edge.svg" width="24" height="24" class="me-2" /> Edge</td>
+                            <td>last 3 versions</td>
+                          </tr>
+                          <tr>
+                            <td><img src="/static/browsers/firefox.svg" width="24" height="24" class="me-2" /> Firefox</td>
+                            <td>last 3 versions, ESR</td>
+                          </tr>
+                          <tr>
+                            <td><img src="/static/browsers/chrome.svg" width="24" height="24" class="me-2" /> Chrome</td>
+                            <td>last 3 versions</td>
+                          </tr>
+                          <tr>
+                            <td><img src="/static/browsers/safari.svg" width="24" height="24" class="me-2" /> Safari</td>
+                            <td>last 3 versions</td>
+                          </tr>
+                          <tr>
+                            <td><img src="/static/browsers/opera.svg" width="24" height="24" class="me-2" /> Opera</td>
+                            <td>last 3 versions</td>
+                          </tr>
+                          <tr>
+                            <td><img src="/static/browsers/electron.svg" width="24" height="24" class="me-2" /> Electron</td>
+                            <td>last 3 versions</td>
+                          </tr>
+                          <tr>
+                            <td><img src="/static/browsers/brave.svg" width="24" height="24" class="me-2" /> Brave</td>
+                            <td>last 3 versions</td>
+                          </tr>
+                          <tr>
+                            <td><img src="/static/browsers/vivaldi.svg" width="24" height="24" class="me-2" /> Vivaldi</td>
+                            <td>last 3 versions</td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </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-beta10
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js" defer></script>
+    <script src="../dist/js/demo.min.js" defer></script>
+  </body>
+</html>

demo/docs/customize.html

@@ -0,0 +1,910 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta10
+* @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>Customize Tabler - 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="../datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          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
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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" >
+                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="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="14" x2="15" y2="14" /></svg>
+                            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">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <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="../faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </a>
+                        <a class="dropdown-item" href="../users.html">
+                          Users
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../license.html">
+                          License
+                        </a>
+                        <a class="dropdown-item" href="../music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="../tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </a>
+                        <a class="dropdown-item" href="../uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="../widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="../wizard.html">
+                          Wizard
+                        </a>
+                      </div>
+                    </div>
+                  </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-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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">
+                      1960 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" 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/lifebuoy -->
+                      <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" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="../docs/index.html">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="../changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </a>
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="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 project!
+                    </a>
+                  </div>
+                </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 g-2 align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Documentation
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="row gx-lg-5">
+              <div class="d-none d-lg-block col-lg-3">
+                <ul class="nav nav-pills nav-vertical">
+                  <li class="nav-item">
+                    <a href="../docs/" class="nav-link">
+                      Introduction
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                      Getting started
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse" id="menu-base">
+                      <li class="nav-item">
+                        <a href="../docs/getting-started.html" class="nav-link">
+                          Getting Started
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/download.html" class="nav-link">
+                          Download
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/browser-support.html" class="nav-link">
+                          Browser Support
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
+                      Content
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse show" id="menu-content">
+                      <li class="nav-item">
+                        <a href="../docs/colors.html" class="nav-link">
+                          Colors
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/typography.html" class="nav-link">
+                          Typography
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/icons.html" class="nav-link">
+                          Icons
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/customize.html" class="nav-link active">
+                          Customize Tabler
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-layout" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                      Layout
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse" id="menu-layout">
+                      <li class="nav-item">
+                        <a href="../docs/page-headers.html" class="nav-link">
+                          Page headers
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                      Form components
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse" id="menu-forms">
+                      <li class="nav-item">
+                        <a href="../docs/form-elements.html" class="nav-link">
+                          Form elements
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/form-helpers.html" class="nav-link">
+                          Form helpers
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/form-validation.html" class="nav-link">
+                          Validation states
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/form-image-check.html" class="nav-link">
+                          Image check
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/form-color-check.html" class="nav-link">
+                          Color check
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/form-selectboxes.html" class="nav-link">
+                          Form selectboxes
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/form-fieldset.html" class="nav-link">
+                          Form fieldset
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                      Components
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse" id="menu-components">
+                      <li class="nav-item">
+                        <a href="../docs/alerts.html" class="nav-link">
+                          Alerts
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/avatars.html" class="nav-link">
+                          Avatars
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/badges.html" class="nav-link">
+                          Badges
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/breadcrumb.html" class="nav-link">
+                          Breadcrumb
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/buttons.html" class="nav-link">
+                          Buttons
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/cards.html" class="nav-link">
+                          Cards
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/carousel.html" class="nav-link">
+                          Carousel
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/dropdowns.html" class="nav-link">
+                          Dropdowns
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/divider.html" class="nav-link">
+                          Divider
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/empty.html" class="nav-link">
+                          Empty states
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/modals.html" class="nav-link">
+                          Modals
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/page-headers.html" class="nav-link">
+                          Page headers
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/progress.html" class="nav-link">
+                          Progress
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/range-slider.html" class="nav-link">
+                          Range slider
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/ribbons.html" class="nav-link">
+                          Ribbons
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/spinners.html" class="nav-link">
+                          Spinners
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/steps.html" class="nav-link">
+                          Steps
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/switch-icon.html" class="nav-link">
+                          Switch icon
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/tables.html" class="nav-link">
+                          Tables
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/tabs.html" class="nav-link">
+                          Tabs
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/timelines.html" class="nav-link">
+                          Timelines
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/toasts.html" class="nav-link">
+                          Toasts
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/tooltips.html" class="nav-link">
+                          Tooltips
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                      Utilities
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse" id="menu-utils">
+                      <li class="nav-item">
+                        <a href="../docs/borders.html" class="nav-link">
+                          Borders
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/cursors.html" class="nav-link">
+                          Cursors
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/interactions.html" class="nav-link">
+                          Interactions
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                      Plugins
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse" id="menu-plugins">
+                      <li class="nav-item">
+                        <a href="../docs/autosize.html" class="nav-link">
+                          Autosize
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/input-mask.html" class="nav-link">
+                          Form input mask
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/flags.html" class="nav-link">
+                          Flags
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/payments.html" class="nav-link">
+                          Payments
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/charts.html" class="nav-link">
+                          Charts
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="../changelog.html" class="nav-link">
+                      Changelog
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta10</span>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div class="col-lg-9">
+                <div class="card card-lg">
+                  <div class="card-body">
+                    <div class="markdown">
+                      <div>
+                        <div class="d-flex mb-3">
+                          <h1 class="m-0">Customize Tabler</h1>
+                        </div>
+                        <p class="mb-4 text-muted">Tabler has been designed so that it can be adjusted to your needs and requirements as much as possible. You can customize your own fonts, colors, font sizes, etc in it.</p>
+                      </div>
+                      <h2 id="custom-google-font">Custom Google Font</h2>
+                      <p>To use a custom Google Fonts font in Tabler you must import the font in the <code class="language-plaintext highlighter-rouge">&lt;head&gt;</code> section of the page. In this example we will use the <em>Inter</em> font:</p>
+                      <div class="language-html highlighter-rouge">
+                        <div class="highlight">
+                          <pre class="highlight"><code><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"preconnect"</span> <span class="na">href=</span><span class="s">"https://fonts.googleapis.com"</span><span class="nt">&gt;</span>
+<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"preconnect"</span> <span class="na">href=</span><span class="s">"https://fonts.gstatic.com"</span> <span class="na">crossorigin</span><span class="nt">&gt;</span>
+<span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&amp;display=swap"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">&gt;</span>
+</code></pre>
+                        </div>
+                      </div>
+                      <p>Now you just need to tell Tabler to use your favorite font:</p>
+                      <div class="language-html highlighter-rouge">
+                        <div class="highlight">
+                          <pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
+<span class="nt">body</span> <span class="p">{</span>
+  <span class="py">--tblr-font-sans-serif</span><span class="p">:</span> <span class="s2">'Inter'</span><span class="p">;</span>
+<span class="p">}</span>
+<span class="nt">&lt;/style&gt;</span>
+</code></pre>
+                        </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-beta10
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js" defer></script>
+    <script src="../dist/js/demo.min.js" defer></script>
+  </body>
+</html>

demo/docs/download.html

@@ -0,0 +1,929 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta10
+* @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>Download - 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="../datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          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
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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" >
+                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="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="14" x2="15" y2="14" /></svg>
+                            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">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <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="../faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </a>
+                        <a class="dropdown-item" href="../users.html">
+                          Users
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../license.html">
+                          License
+                        </a>
+                        <a class="dropdown-item" href="../music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="../tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </a>
+                        <a class="dropdown-item" href="../uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="../widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="../wizard.html">
+                          Wizard
+                        </a>
+                      </div>
+                    </div>
+                  </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-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
+                        </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">
+                      1960 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" 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/lifebuoy -->
+                      <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" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="../docs/index.html">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="../changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </a>
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="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 project!
+                    </a>
+                  </div>
+                </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 g-2 align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Documentation
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="row gx-lg-5">
+              <div class="d-none d-lg-block col-lg-3">
+                <ul class="nav nav-pills nav-vertical">
+                  <li class="nav-item">
+                    <a href="../docs/" class="nav-link">
+                      Introduction
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
+                      Getting started
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse show" id="menu-base">
+                      <li class="nav-item">
+                        <a href="../docs/getting-started.html" class="nav-link">
+                          Getting Started
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/download.html" class="nav-link active">
+                          Download
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/browser-support.html" class="nav-link">
+                          Browser Support
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                      Content
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse" id="menu-content">
+                      <li class="nav-item">
+                        <a href="../docs/colors.html" class="nav-link">
+                          Colors
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/typography.html" class="nav-link">
+                          Typography
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/icons.html" class="nav-link">
+                          Icons
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/customize.html" class="nav-link">
+                          Customize Tabler
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-layout" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                      Layout
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse" id="menu-layout">
+                      <li class="nav-item">
+                        <a href="../docs/page-headers.html" class="nav-link">
+                          Page headers
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                      Form components
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse" id="menu-forms">
+                      <li class="nav-item">
+                        <a href="../docs/form-elements.html" class="nav-link">
+                          Form elements
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/form-helpers.html" class="nav-link">
+                          Form helpers
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/form-validation.html" class="nav-link">
+                          Validation states
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/form-image-check.html" class="nav-link">
+                          Image check
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/form-color-check.html" class="nav-link">
+                          Color check
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/form-selectboxes.html" class="nav-link">
+                          Form selectboxes
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/form-fieldset.html" class="nav-link">
+                          Form fieldset
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                      Components
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse" id="menu-components">
+                      <li class="nav-item">
+                        <a href="../docs/alerts.html" class="nav-link">
+                          Alerts
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/avatars.html" class="nav-link">
+                          Avatars
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/badges.html" class="nav-link">
+                          Badges
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/breadcrumb.html" class="nav-link">
+                          Breadcrumb
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/buttons.html" class="nav-link">
+                          Buttons
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/cards.html" class="nav-link">
+                          Cards
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/carousel.html" class="nav-link">
+                          Carousel
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/dropdowns.html" class="nav-link">
+                          Dropdowns
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/divider.html" class="nav-link">
+                          Divider
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/empty.html" class="nav-link">
+                          Empty states
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/modals.html" class="nav-link">
+                          Modals
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/page-headers.html" class="nav-link">
+                          Page headers
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/progress.html" class="nav-link">
+                          Progress
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/range-slider.html" class="nav-link">
+                          Range slider
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/ribbons.html" class="nav-link">
+                          Ribbons
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/spinners.html" class="nav-link">
+                          Spinners
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/steps.html" class="nav-link">
+                          Steps
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/switch-icon.html" class="nav-link">
+                          Switch icon
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/tables.html" class="nav-link">
+                          Tables
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/tabs.html" class="nav-link">
+                          Tabs
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/timelines.html" class="nav-link">
+                          Timelines
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/toasts.html" class="nav-link">
+                          Toasts
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/tooltips.html" class="nav-link">
+                          Tooltips
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                      Utilities
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse" id="menu-utils">
+                      <li class="nav-item">
+                        <a href="../docs/borders.html" class="nav-link">
+                          Borders
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/cursors.html" class="nav-link">
+                          Cursors
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/interactions.html" class="nav-link">
+                          Interactions
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                      Plugins
+                      <span class="nav-link-toggle"></span>
+                    </a>
+                    <ul class="nav nav-pills collapse" id="menu-plugins">
+                      <li class="nav-item">
+                        <a href="../docs/autosize.html" class="nav-link">
+                          Autosize
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/input-mask.html" class="nav-link">
+                          Form input mask
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/flags.html" class="nav-link">
+                          Flags
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/payments.html" class="nav-link">
+                          Payments
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/charts.html" class="nav-link">
+                          Charts
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="../changelog.html" class="nav-link">
+                      Changelog
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta10</span>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div class="col-lg-9">
+                <div class="card card-lg">
+                  <div class="card-body">
+                    <div class="markdown">
+                      <div>
+                        <div class="d-flex mb-3">
+                          <h1 class="m-0">Download</h1>
+                        </div>
+                        <p class="mb-4 text-muted">Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more.</p>
+                      </div>
+                      <h2 id="cdn-via-unpkg">CDN via unpkg</h2>
+                      <p>All files included in <code class="language-plaintext highlighter-rouge">@tabler/core</code> npm package are available over a unpkg CDN. Use it to deliver cached version of Tabler’s compiled CSS and JS to your project.</p>
+                      <div class="language-html highlighter-rouge">
+                        <div class="highlight">
+                          <pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta10/dist/js/tabler.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
+<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta10/dist/css/tabler.min.css"</span><span class="nt">&gt;</span>
+</code></pre>
+                        </div>
+                      </div>
+                      <p>You can also include additional Tabler plugins:</p>
+                      <div class="language-html highlighter-rouge">
+                        <div class="highlight">
+                          <pre class="highlight"><code><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta10/dist/css/tabler-flags.min.css"</span><span class="nt">&gt;</span>
+<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta10/dist/css/tabler-payments.min.css"</span><span class="nt">&gt;</span>
+<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta10/dist/css/tabler-vendors.min.css"</span><span class="nt">&gt;</span>
+</code></pre>
+                        </div>
+                      </div>
+                      <h2 id="package-managers">Package managers</h2>
+                      <p>Install Tabler in your Node.js powered apps with the npm package:</p>
+                      <div class="language-plaintext highlighter-rouge">
+                        <div class="highlight">
+                          <pre class="highlight"><code>npm install @tabler/core
+</code></pre>
+                        </div>
+                      </div>
+                      <p>Tabler uses other packages to enhance the functionality for example charts and input masks. These are not automatically installed to avoid huge 
+                        dependency trees and need to be installed by using npm install. We support the following packages as of writing.</p>
+                      <ul>
+                        <li><a href="https://apexcharts.com/">apexcharts</a></li>
+                        <li><a href="http://www.jacklmoore.com/autosize/">autosize</a></li>
+                        <li><a href="https://github.com/Choices-js/Choices">choices.js</a></li>
+                        <li><a href="https://inorganik.github.io/countUp.js/">countup.js</a></li>
+                        <li><a href="https://flatpickr.js.org/">flatpickr</a></li>
+                        <li><a href="https://imask.js.org/">imask</a></li>
+                        <li><a href="https://litepicker.com/">litepicker</a></li>
+                        <li><a href="https://refreshless.com/nouislider/">nouislider</a></li>
+                        <li><a href="https://tom-select.js.org/">tom-select</a></li>
+                      </ul>
+                      <p>For the complete list of supported packages you can check the peerDependencies section in our <a href="https://github.com/tabler/tabler/blob/dev/package.json">package.json</a></p>
+                    </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-beta10
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js" defer></script>
+    <script src="../dist/js/demo.min.js" defer></script>
+  </body>
+</html>