dependencies update, new package

New navigation

.editorconfig

@@ -1,23 +1,14 @@
 [*]
 charset=utf-8
 end_of_line=lf
-insert_final_newline=true
+insert_final_newline=false
+indent_style=tab
+tab_width=3
+max_line_length=off
+
+[*.{rb,yml,scss}]
 indent_style=space
 indent_size=2
 
-[*.svg]
-indent_style=tab
-tab_width=3
-
-[*.html]
-indent_style=tab
-indent_size=3
-insert_final_newline=false
-
-[*.md]
-indent_style=tab
-tab_width=3
-
 [*.js.map]
-indent_style=tab
 indent_size=3

.github/CODE_OF_CONDUCT.md

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

.gitignore

@@ -4,7 +4,8 @@ node_modules/
 /db.json
 .jekyll-metadata
 .jekyll-cache
-tmp/
+/tmp/
+/tmp-dist/
 /yarn.lock
 .DS_Store
 /Gemfile.lock

Gemfile

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

README.md

@@ -1,6 +1,6 @@
 # Tabler
 
-Premium and Open Source dashboard template with responsive and high-quality UI.
+A premium and open source dashboard template with a responsive and high-quality UI.
 
 👉 [Become a sponsor to Tabler](https://github.com/sponsors/codecalm) 🚀
 
@@ -10,46 +10,47 @@ Premium and Open Source dashboard template with responsive and high-quality UI.
  [![Sponsors on Open Collective](https://opencollective.com/tabler/sponsors/badge.svg)](#sponsors)
 
 
-<strong><a href="https://preview-dev.tabler.io">View Demo</a> | <a href="https://github.com/tabler/tabler-react">View React Version</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a> | <a href="https://goo.gl/zJP2dT">Join us on Slack</a></strong>
+<strong><a href="https://preview-dev.tabler.io">View Demo</a> | <a href="https://github.com/tabler/tabler-react">View React Version</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a> | <a href="https://join.slack.com/t/tabler-ui/shared_invite/enQtMzQxMTYxODk5NDYwLWU4Y2FiNWYxN2UyNWUzOTBjNmU0ZGM2ZDViMjQzMWMyZWM0ZDFkMGRhZGFiYzFhZjM1NmIxOGQ2ZDUwZjlhMTU">Join us on Slack</a></strong>
 
-![Tabler preview](https://raw.githubusercontent.com/tabler/tabler/dev/static/img/tabler-preview.png)
+![Tabler preview](https://raw.githubusercontent.com/tabler/tabler/dev/static/tabler-preview.png)
 
 ## Status
 
-<a href="https://www.npmjs.com/package/tabler-ui"><a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"/></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"/></a> <img src="https://img.shields.io/npm/dt/tabler-ui.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler-ui.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a>
+<a href="https://www.npmjs.com/package/tabler"><a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"/></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"/></a> <img src="https://img.shields.io/npm/dt/tabler.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler.svg" alt="Latest Release"></a>
 
 ## Features
 
-We created this admin panel for everyone who wants to create any templates based on our pre-made components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS (and some [Liquid](https://github.com/Shopify/liquid/wiki)) knowledge—as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
+We've created this admin panel for everyone who wants to create templates based on our pre-made components. Our mission is to deliver a user-friendly, clear and easy administration panel that can be used by both simple websites and sophisticated systems. The only requirement is basic HTML and CSS (and some [Liquid](https://github.com/Shopify/liquid/wiki)) knowledge — as a reward, you'll be able to manage and visualise different types of data in the easiest possible way!
 
-* **Responsive:** With support for mobile, tablet and desktop it doesn’t matter what device you’re using. Tabler is responsive in all major browsers.
+* **Responsive:** With the support for mobile, tablet and desktop displays, it doesn’t matter what device you’re using. Tabler is responsive in all major browsers.
-* **Cross Browser:** Our theme works perfectly with Latest Chrome, Firefox+, Latest Safari, Opera, Edge and mobile browsers. We work hard to continuously support them.
+* **Cross Browser:** Our theme works perfectly with the latest Chrome, Firefox+, latest Safari, Opera, Edge and mobile browsers. We work hard to to provide continuous support for them.
-* **HTML5 & CSS3:** We only use modern web technologies like HTML5 and CSS3. Our theme includes some subtle CSS3 animations so you will get anyone’s attention.
+* **HTML5 & CSS3:** We use only modern web technologies, such as HTML5 and CSS3. Our theme includes some subtle CSS3 animations, which will help you attract attention.
-* **Clean Code:** We strictly followed Bootstrap’s guidelines to make your integration as easy as possible. All code is handwritten and W3C valid.
+* **Clean Code:** We followed Bootstrap’s guidelines carefully to make your integration as easy as possible. All code is handwritten and W3C valid.
-* **Demo pages**: Tabler features over 20 individual pages featuring various components, giving you the freedom to choose and combine. All components can take variation in color and styling that can easily be modified using Sass. The sky is the limit!
+* **Demo pages**: Tabler features over 20 individual pages using various components, which gives you the freedom to choose and combine. All components can vary in color and styling that you can easily modify using Sass. Sky is the limit!
 * **Single Page Application versions:** [Tabler React](https://github.com/tabler/tabler-react) has React components for Tabler.
 
 ## Setup environment
 
-To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow these steps:
+To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow the steps below:
 
 1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
 2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
-3. [Install Ruby](https://ruby-lang.org/en/documentation/installation/), recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
+3. [Install Ruby](https://ruby-lang.org/en/documentation/installation/) - the recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
-4. [Install Bundler](https://bundler.io) with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
+4. [Install Bundler](https://bundler.io) with `gem install bundler` and finally run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
 
 **Windows users**:
-1. [Install Git](https://git-scm.com/download/win) in `C:\\Program Files\\git\\bin` directory and run `npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"` to change default shell.
+
-2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/), recommended version is [2.5.5](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe).
+1. [Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\\Program Files\git\bin\bash.exe"` to change the default shell.
+2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/) - the recommended version is [2.5.5](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe).
 3. [Read guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems.
 
-When completed, you'll be able to run the various commands provided from the command line.
+Once you complete the setup, you'll be able to run the various commands provided from the command line.
 
 ## Build locally
 
 1. From the root `/tabler` directory, run `npm run start` in the command line.
 2. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
-3. Any change in `/pages` directory will build application and refresh the page.
+3. Any change in the `/pages` directory will build the application and refresh the page.
 
 **Note**:
 Run `npm run build` for reforms a one off build application without refresh.
@@ -61,7 +62,7 @@ https://tabler.canny.io/feature-requests
 
 ## Bugs and feature requests
 
-Have a bug or a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
+Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
 
 ## Creators
 
@@ -73,7 +74,7 @@ Have a bug or a feature request? [Please open a new issue](https://github.com/ta
 
 ## Contributors
 
-This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
+This project exists thanks to all the people who contribute. [[Contribute](https://github.com/tabler/tabler/graphs/contributors)].
 <a href="https://github.com/tabler/tabler/graphs/contributors"><img src="https://opencollective.com/tabler/contributors.svg?width=890&button=false"></a>
 
 ## Backers
@@ -85,7 +86,7 @@ Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com
 
 ## Sponsors
 
-Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/tabler#sponsor)]
+Support this project by becoming a sponsor. Your logo will be displayed here with a link to your website. [[Become a sponsor](https://opencollective.com/tabler#sponsor)]
 
 <a href="https://opencollective.com/tabler/sponsor/0/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/0/avatar.svg"></a>
 <a href="https://opencollective.com/tabler/sponsor/1/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/1/avatar.svg"></a>

_config.yml

@@ -1,19 +1,26 @@
 source: pages
 destination: tmp
 
-version: 1.0-alpha
+version: 1.0.0-alpha.3
 title: Tabler
 description: Premium and Open Source dashboard template with responsive and high quality UI.
 github_url: https://github.com/tabler/tabler
 
-debug: true
+debug: false
+
+dark-theme: false
 
 plugins:
   - jekyll-random
+  - jekyll-toc
   - jekyll-tidy
   - jekyll-timeago
   - jekyll-redirect-from
-- jekyll-include-cache
+
+tabler-plugins:
+  - tabler-flags
+  - tabler-payments
+  - tabler-buttons
 
 exclude:
   - .jekyll-cache
@@ -22,47 +29,46 @@ keep_files:
   - css/ui-kit.css
   - css/dark.css
   - css/rtl.css
-#- js/ui-kit.js
 
 markdown: kramdown
-highlighter: rouge
-
 kramdown:
+  input: GFM
   syntax_highlighter: rouge
-  syntax_highlighter_opts:
-    css_class: ''
-    span:
-      line_numbers: false
 
 jekyll_tidy:
   compress_html: false
   ignore_env: development
 
+toc:
+  min_level: 2
+  max_level: 2
+  list_class: list-unstyled
 
 collections:
   docs:
-    output: true
+    output: false
   changelog:
     output: false
   components:
-    output: true
+    output: false
 
 defaults:
-  -
+  - scope:
-    scope:
+      type: "pages"
-      type: pages
+      path: "*.md"
+    values:
+      layout: markdown
+
+  - scope:
+      type: "pages"
     values:
       layout: default
-      nav-position: top
+  - scope:
-  -
+      type: "docs"
-    scope:
-      type: docs
     values:
       layout: docs
-      nav-position: top
+  - scope:
-  -
+      type: "components"
-    scope:
-      type: components
     values:
       layout: component
 
@@ -108,6 +114,14 @@ colors:
     hex: '#868e96'
     title: Gray
 
+colors-extra:
+  white:
+    hex: '#ffffff'
+    title: White
+  dark:
+    hex: '#303645'
+    title: Dark
+
 variants:
   - name: success
     icon: check

build/banner.js

@@ -1,10 +1,3 @@
-/*
- * Tabler (v0.9.0): banner.js
- * Copyright 2018-2019 The Tabler Authors
- * Copyright 2018-2019 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
-
 'use strict';
 
 const pkg = require('../package.json'),

build/browsersync.js

@@ -12,17 +12,18 @@ bs.init({
 	server: {
 		routes: {
 			'/': 'tmp',
-      '/dist': 'dist',
+			'/dist': 'tmp-dist',
-      '/dist/fonts': 'fonts',
 			'/libs': 'static/libs',
-      '/img': 'static/img',
+			'/tmp-dist/img': 'img',
+			'/static': 'static',
 			'/node_modules': 'node_modules',
 		},
 	},
-  files: ['tmp/**/*', 'dist/css/*.css', 'dist/js/*.js'],
+	files: ['tmp/**/*', 'tmp-dist/css/*.css', 'tmp-dist/js/*.js', 'tmp-dist/img/*.svg'],
 	watchOptions: {
 		ignoreInitial: true,
 	},
+	reloadDelay: 1000,
 	notify: false,
 	open: false,
 	snippetOptions: {

build/capture-components.sh

@@ -1,7 +1,6 @@
 rm -rf ../static/img/components/*
 
-for file in ../pages/_components/*.html
+for file in ../pages/_components/*.html; do
-do
   file="$(basename -- $file)"
   file="${file%.html}"
   url="http://localhost:3001/components/$file.html"

build/copy-libs.js

@@ -1,11 +1,33 @@
-const libs = require('../pages/_data/libs'),
+if (!Array.prototype.flat) {
+	Object.defineProperty(Array.prototype, 'flat', {
+		value: function (depth = 1) {
+			return this.reduce(function (flat, toFlatten) {
+				return flat.concat((Array.isArray(toFlatten) && (depth > 1)) ? toFlatten.flat(depth - 1) : toFlatten);
+			}, []);
+		}
+	});
+}
+
+
+const all_libs = require('../pages/_data/libs'),
 	path = require('path'),
 	{ exec } = require('child_process');
 
-const all_libs = libs.js.concat(libs.css);
+let files = [];
+
+Object.keys(all_libs.js).forEach(function (lib) {
+	files.push(Array.isArray(all_libs.js[lib]) ? all_libs.js[lib] : [all_libs.js[lib]]);
+});
+
+Object.keys(all_libs.css).forEach(function (lib) {
+	files.push(Array.isArray(all_libs.css[lib]) ? all_libs.css[lib] : [all_libs.css[lib]]);
+});
+
+files = files.flat();
+
+files.forEach(function (file) {
+	let dirname = path.dirname(file).replace('@', '');
+	let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${file} dist/libs/${file.replace('@', '')}`;
 
-all_libs.forEach(function (lib) {
-  let dirname = path.dirname(lib).replace('@', '');
-  let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${lib} dist/libs/${lib.replace('@', '')}`;
 	exec(cmd)
 });

build/postcss.config.js

@@ -8,9 +8,7 @@
 'use strict';
 
 module.exports = ctx => ({
-  map: ctx.file.dirname.includes('examples') ?
+	map: {
-    false :
-    {
 		inline: false,
 		annotation: true,
 		sourcesContent: true

build/rollup.config.js

@@ -8,6 +8,7 @@
 'use strict';
 
 const BUNDLE = process.env.BUNDLE === 'true';
+const dir = BUNDLE ? 'dist' : 'tmp-dist';
 
 import path from 'path';
 import babel from 'rollup-plugin-babel';
@@ -34,16 +35,18 @@ if (BUNDLE) {
 	]);
 }
 
+
 module.exports = {
 	context: "window",
 	input: {
 		tabler: path.resolve(__dirname, '../js/tabler.js'),
-    'tabler-charts': path.resolve(__dirname, '../js/tabler-charts.js'),
+		// 'tabler-charts': path.resolve(__dirname, '../js/tabler-charts.js'),
+		'tabler-range-sliders': path.resolve(__dirname, '../js/tabler-range-sliders.js')
 	},
 	output: {
 		banner,
 		// name: 'tabler',
-    dir: path.resolve(__dirname, `../dist/js/`),
+		dir: path.resolve(__dirname, `../${dir}/js/`),
 		entryFileNames: BUNDLE ? '[name].min.js' : '[name].js',
 		format: 'cjs'
 	},

build/scss-compile.js

@@ -5,34 +5,38 @@
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
  */
 
+const BUNDLE = process.env.BUNDLE === 'true';
+
 const path = require('path'),
 	glob = require("glob"),
 	fs = require("fs"),
 	sass = require("node-sass"),
 	packageImporter = require('node-sass-package-importer');
 
-glob("scss/tabler*.scss", {}, function (er, files) {
+const dir = BUNDLE ? 'dist' : 'tmp-dist';
+
+glob("scss/{tabler*,demo}.scss", {}, function (er, files) {
 	files.forEach(function (file) {
 		var basename = path.basename(file, '.scss');
 
 		sass.render(
 			{
 				file: file,
-        outFile: `dist/css/${basename}.css`,
+				outFile: `${dir}/css/${basename}.css`,
 				sourceMap: true,
 				sourceMapContents: true,
-        precision: 6,
+				precision: 7,
 				importer: packageImporter()
 			},
 			(error, result) => {
 				if (!error) {
-          fs.writeFile(`dist/css/${basename}.css`, result.css, error => {
+					fs.writeFile(`${dir}/css/${basename}.css`, result.css, error => {
 						if (error) {
 							console.log(error);
 						}
 					});
 
-          fs.writeFile(`dist/css/${basename}.css.map`, result.map, error => {
+					fs.writeFile(`${dir}/css/${basename}.css.map`, result.map, error => {
 						if (error) {
 							console.log(error);
 						}

demo/400.html

@@ -0,0 +1,198 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version v1.0.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Page 400 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
+  </head>
+  <body class="antialiased border-top-wide border-primary d-flex flex-column">
+    <div class="flex-fill d-flex align-items-center justify-content-center">
+      <div class="container-tight py-6">
+        <div class="empty">
+          <div class="empty-icon">
+            <div class="display-4">400</div>
+          </div>
+          <p class="empty-title h3">Oops… You just found an error page</p>
+          <p class="empty-subtitle text-muted">
+            We are sorry but your request contains bad syntax and cannot be fulfilled
+          </p>
+          <div class="empty-action">
+            <a href="./." class="btn btn-primary">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+              Take me home
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
+    <script src="./dist/libs/autosize/dist/autosize.min.js?1580339009"></script>
+    <script src="./dist/libs/imask/dist/imask.min.js?1580339009"></script>
+    <script src="./dist/libs/apexcharts/dist/apexcharts.min.js?1580339009"></script>
+    <script src="./dist/libs/nouislider/distribute/nouislider.min.js?1580339009"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1580339009"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
+    <script>
+      // @formatter:off
+      noUiSlider.create(document.getElementById('range-simple'), {
+      	start: 20,
+      	connect: [true, false],
+      	step: 10,
+      	range: {
+      		min: 0,
+      		max: 100
+      	}
+      });
+      // @formatter:on
+    </script>
+    <script>
+      // @formatter:off
+      noUiSlider.create(document.getElementById('range-connect'), {
+      	start: [60, 90],
+      	connect: [false, true, false],
+      	step: 10,
+      	range: {
+      		min: 0,
+      		max: 100
+      	}
+      });
+      // @formatter:on
+    </script>
+    <script>
+      // @formatter:off
+      noUiSlider.create(document.getElementById('range-color'), {
+      	start: 40,
+      	connect: [true, false],
+      	step: 10,
+      	range: {
+      		min: 0,
+      		max: 100
+      	}
+      });
+      // @formatter:on
+    </script>
+    <script>
+      // @formatter:off
+      document.addEventListener("DOMContentLoaded", function () {
+      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-revenue-bg'), {
+      		chart: {
+      			type: "area",
+      			fontFamily: 'inherit',
+      			height: 40.0,
+      			sparkline: {
+      				enabled: true
+      			},
+      			animations: {
+      				enabled: false
+      			},
+      		},
+      		dataLabels: {
+      			enabled: false,
+      		},
+      		fill: {
+      			opacity: .16,
+      			type: 'solid'
+      		},
+      		stroke: {
+      			width: 2,
+      			lineCap: "round",
+      			curve: "smooth",
+      		},
+      		series: [{
+      			name: "Profits",
+      			data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
+      		}],
+      		grid: {
+      			strokeDashArray: 4,
+      		},
+      		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
+      			axisBorder: {
+      				show: false,
+      			},
+      			type: 'datetime',
+      		},
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
+      		labels: [
+      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
+      		],
+      		colors: ["#206bc4"],
+      		legend: {
+      			show: false,
+      		},
+      	})).render();
+      });
+      // @formatter:on
+    </script>
+    <script>
+      (function () {
+      	const elements = document.querySelectorAll('[data-toggle="autosize"]');
+      	if (elements.length) {
+      		elements.forEach(function (element) {
+      			autosize(element);
+      		});
+      	}
+      })();
+    </script>
+    <script>
+      (function () {
+      	const $elem = $('[data-mask]');
+      	if ($elem) {
+      		$elem.each(function () {
+      			IMask($(this).get(0), {
+      				mask: $(this).attr('data-mask'),
+      				lazy: $(this).attr('data-mask-visible') === 'true',
+      			});
+      		});
+      	}
+      })();
+    </script>
+  </body>
+</html>

demo/401.html

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

demo/403.html

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

demo/404.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,104 +24,47 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Page 404 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
-  <body class="antialiased  border-top-2 border-primary">
+  <body class="antialiased border-top-wide border-primary d-flex flex-column">
+    <div class="flex-fill d-flex align-items-center justify-content-center">
+      <div class="container-tight py-6">
         <div class="empty">
           <div class="empty-icon">
             <div class="display-4">404</div>
           </div>
-      <p class="empty-title h3">Oops&hellip; You just found an error page</p>
+          <p class="empty-title h3">Oops… You just found an error page</p>
           <p class="empty-subtitle text-muted">
             We are sorry but the page you are looking for was not found
           </p>
           <div class="empty-action">
-        <a href="#" class="btn btn-primary">
+            <a href="./." class="btn btn-primary">
-          Search again
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+              Take me home
             </a>
           </div>
         </div>
-    <script>
+      </div>
-      window.tabler_colors = {
+    </div>
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
     <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
     <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <!-- Tabler Plugins -->
+    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.addEventListener("DOMContentLoaded", function(event) {
-         window.ApexCharts && (new ApexCharts(document.getElementById('chart-revenue-bg'), {
-            chart: {
-               type: 'area',
-               height: 40.0,
-            sparkline: {
-               enabled: true
-            },
-            },
-            fill: {
-               opacity: .16
-            },
-            series: [{
-               name: 'Profits',
-               data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
-            }],
-            xaxis: {
-               type: 'datetime',
-            },
-            labels: [...Array(30).keys()].map(n => `2019-09-${n+1}`),
-            colors: [
-               tabler.colors["blue"]
-            ],
-         })).render();
-      });
-    </script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
   </body>
 </html>

demo/500.html

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

demo/503.html

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

demo/all.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,60 +24,49 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Index - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -102,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -113,18 +101,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -132,9 +118,7 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -143,93 +127,342 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="./charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="./users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="./layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="./docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -251,24 +484,89 @@
                   </div>
                   <div class="card-body">
                     <ul>
+                      <li>
+                        <a href="/search-results.html">
+                          search-results.html
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/redirects.json">
+                          redirects.json
+                        </a>
+                      </li>
                       <li>
                         <a href="/components/index.html">
                           redirect.html
                         </a>
                       </li>
+                      <li>
+                        <a href="/welcome.html">
+                          welcome.html
+                        </a>
+                      </li>
                       <li>
                         <a href="/tmp.html">
                           tmp.html
                         </a>
                       </li>
+                      <li>
+                        <a href="/tmp-dark.html">
+                          tmp-dark.html
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/terms-of-service.html">
+                          terms-of-service.html
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/layout-dark-navigation.html">
+                          layout-dark-navigation.html
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/layout-dark-topnav.html">
+                          layout-dark-topnav.html
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/layout-dark.html">
+                          layout-dark.html
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/layout-sidebar-dark.html">
+                          layout-sidebar-dark.html
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/layout-sidebar-narrow.html">
+                          layout-sidebar-narrow.html
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/layout-sidebar-only.html">
+                          layout-sidebar-only.html
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/layout-sidebar-right.html">
+                          layout-sidebar-right.html
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/layout-sidebar.html">
+                          layout-sidebar.html
+                        </a>
+                      </li>
                       <li>
                         <a href="/layouts.html">
                           layouts.html
                         </a>
                       </li>
                       <li>
-                      <a href="/redirects.json">
+                        <a href="/sitemap.xml">
-                        redirects.json
+                          sitemap.xml
                         </a>
                       </li>
                       <li>
@@ -322,13 +620,8 @@
                         </a>
                       </li>
                       <li>
-                      <a href="/layout-header-dark.html">
+                        <a href="/datatables.html">
-                        Dark header
+                          Data Tables
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-dark-mode.html">
-                        Dark mode
                         </a>
                       </li>
                       <li>
@@ -359,11 +652,6 @@
                           Flags
                         </a>
                       </li>
-                    <li>
-                      <a href="/layout-navbar-folded.html">
-                        Folded sidebar
-                      </a>
-                    </li>
                       <li>
                         <a href="/forgot-password.html">
                           Forgot password
@@ -407,13 +695,8 @@
                         </a>
                       </li>
                       <li>
-                      <a href="/layout-test.html">
+                        <a href="/lists.html">
-                        Layout test
+                          Lists
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/login.html">
-                        Login
                         </a>
                       </li>
                       <li>
@@ -433,8 +716,31 @@
                         </a>
                       </li>
                       <li>
-                      <a href="/layout-navbar-top.html">
+                        <a href="/markdown.html">
-                        Navbar top
+                          Markdown
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/music.html">
+                          Music components
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/400.html">
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                          Page 400
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/401.html">
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                          Page 401
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/403.html">
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                          Page 403
                         </a>
                       </li>
                       <li>
@@ -443,6 +749,18 @@
                           Page 404
                         </a>
                       </li>
+                      <li>
+                        <a href="/500.html">
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                          Page 500
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/503.html">
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                          Page 503
+                        </a>
+                      </li>
                       <li>
                         <a href="/pagination.html">
                           Pagination
@@ -464,11 +782,6 @@
                           RTL mode
                         </a>
                       </li>
-                    <li>
-                      <a href="/register.html">
-                        Register
-                      </a>
-                    </li>
                       <li>
                         <a href="/ribbons.html">
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
@@ -476,18 +789,13 @@
                         </a>
                       </li>
                       <li>
-                      <a href="/layout-navbar-left.html">
+                        <a href="/sign-in.html">
-                        Sidebar left
+                          Sign in
                         </a>
                       </li>
                       <li>
-                      <a href="/layout-navbar-right.html">
+                        <a href="/sign-up.html">
-                        Sidebar right
+                          Sign up
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-navbar-dark.html">
-                        Sidebar white
                         </a>
                       </li>
                       <li>
@@ -501,11 +809,6 @@
                           Social elements
                         </a>
                       </li>
-                    <li>
-                      <a href="/layout-header-sticky.html">
-                        Sticky header
-                      </a>
-                    </li>
                       <li>
                         <a href="/store.html">
                           Store
@@ -542,47 +845,11 @@
           </main>
         </div>
       </div>
-    <script>
+    </div>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
     <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
     <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <!-- Tabler Plugins -->
+    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
   </body>
 </html>

demo/blank.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,60 +24,49 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Blank page - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -102,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -113,18 +101,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -132,115 +118,362 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
-            <li class="nav-item dropdown">
+                <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
+			aria-expanded="true" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item active" href="./blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="./charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="./users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="./layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="./docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <div class="empty">
               <div class="empty-icon">
-              <img src="./img/illustrations/undraw_printing_invoices_5r4r.svg" class="h-8 mb-4" alt="">
+                <img src="./static/illustrations/undraw_printing_invoices_5r4r.svg" class="h-8 mb-4" alt="">
               </div>
               <p class="empty-title h3">No results found</p>
               <p class="empty-subtitle text-muted">
                 Try adjusting your search or filter to find what you're looking for.
               </p>
               <div class="empty-action">
-              <a href="#" class="btn btn-primary">
+                <a href="./." class="btn btn-primary">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                   Add your first client
                 </a>
@@ -249,47 +482,11 @@
           </main>
         </div>
       </div>
-    <script>
+    </div>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
     <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
     <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <!-- Tabler Plugins -->
+    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
   </body>
 </html>

demo/blog.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,60 +24,49 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Blog - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -102,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -113,18 +101,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -132,9 +118,7 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -143,93 +127,342 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="./charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="./users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="./layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item active dropdown">
-              <a class="nav-link" href="./docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="true" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./invoice.html" >
+                        Invoice
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item active" href="./blog.html" >
+                        Blog cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./search-results.html" >
+                        Search results
                       </a>
                     </li>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -245,13 +478,13 @@
               <div class="col-sm-6 col-xl-4">
                 <div class="card d-flex flex-column">
                   <a href="#">
-                  <img class="card-img-top" src="./img/photos//9f36332564ca271d.jpg" alt="And this isn&#39;t my nose. This is a false one.">
+                    <img class="card-img-top" src="./static/photos//9f36332564ca271d.jpg" alt="And this isn&#39;t my nose. This is a false one.">
                   </a>
                   <div class="card-body d-flex flex-column">
                     <h3 class="card-title"><a href="#">And this isn't my nose. This is a false one.</a></h3>
                     <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
                     <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./img/avatars/002m.jpg)"></span>
+                      <span class="avatar avatar-md" style="background-image: url(./static/avatars/002m.jpg)"></span>
                       <div class="ml-3">
                         <a href="./profile.html" class="text-body">Dunn Slane</a>
                         <small class="d-block text-muted">3 days ago</small>
@@ -268,13 +501,13 @@
               <div class="col-sm-6 col-xl-4">
                 <div class="card d-flex flex-column">
                   <a href="#">
-                  <img class="card-img-top" src="./img/photos//35b88fc04a518c1b.jpg" alt="Well, I didn&#39;t vote for you.">
+                    <img class="card-img-top" src="./static/photos//35b88fc04a518c1b.jpg" alt="Well, I didn&#39;t vote for you.">
                   </a>
                   <div class="card-body d-flex flex-column">
                     <h3 class="card-title"><a href="#">Well, I didn't vote for you.</a></h3>
                     <div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
                     <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./img/avatars/003m.jpg)"></span>
+                      <span class="avatar avatar-md" style="background-image: url(./static/avatars/003m.jpg)"></span>
                       <div class="ml-3">
                         <a href="./profile.html" class="text-body">Emmy Levet</a>
                         <small class="d-block text-muted">3 days ago</small>
@@ -291,13 +524,13 @@
               <div class="col-sm-6 col-xl-4">
                 <div class="card d-flex flex-column">
                   <a href="#">
-                  <img class="card-img-top" src="./img/photos//36e273986ed577b8.jpg" alt="How do you know she is a witch?">
+                    <img class="card-img-top" src="./static/photos//36e273986ed577b8.jpg" alt="How do you know she is a witch?">
                   </a>
                   <div class="card-body d-flex flex-column">
                     <h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
                     <div class="text-muted">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
                     <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./img/avatars/000f.jpg)"></span>
+                      <span class="avatar avatar-md" style="background-image: url(./static/avatars/000f.jpg)"></span>
                       <div class="ml-3">
                         <a href="./profile.html" class="text-body">Maryjo Lebarree</a>
                         <small class="d-block text-muted">3 days ago</small>
@@ -317,7 +550,7 @@
                     <h3 class="card-title"><a href="#">Weaseling out of things is important to learn.</a></h3>
                     <div class="text-muted">Please do not offer my god a peanut. That's why I love elementary school, Edna. The children beli...</div>
                     <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./img/avatars/004f.jpg)"></span>
+                      <span class="avatar avatar-md" style="background-image: url(./static/avatars/004f.jpg)"></span>
                       <div class="ml-3">
                         <a href="./profile.html" class="text-body">Perren Keemar</a>
                         <small class="d-block text-muted">3 days ago</small>
@@ -337,7 +570,7 @@
                     <h3 class="card-title"><a href="#">You don't like your job, you don't strike.</a></h3>
                     <div class="text-muted">But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've ...</div>
                     <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./img/avatars/007m.jpg)"></span>
+                      <span class="avatar avatar-md" style="background-image: url(./static/avatars/007m.jpg)"></span>
                       <div class="ml-3">
                         <a href="./profile.html" class="text-body">Sunny Airey</a>
                         <small class="d-block text-muted">3 days ago</small>
@@ -376,7 +609,7 @@
                   <div class="row row-0 flex-fill">
                     <div class="col-md-3">
                       <a href="#">
-                      <img src="./img/photos//9f36332564ca271d.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                        <img src="./static/photos//9f36332564ca271d.jpg" class="w-100 h-100 object-cover" alt="Card side image">
                       </a>
                     </div>
                     <div class="col">
@@ -384,7 +617,7 @@
                         <h3 class="card-title"><a href="#">And this isn't my nose. This is a false one.</a></h3>
                         <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
                         <div class="d-flex align-items-center pt-5 mt-auto">
-                        <span class="avatar avatar-md" style="background-image: url(./img/avatars/002m.jpg)"></span>
+                          <span class="avatar avatar-md" style="background-image: url(./static/avatars/002m.jpg)"></span>
                           <div class="ml-3">
                             <a href="./profile.html" class="text-body">Dunn Slane</a>
                             <small class="d-block text-muted">3 days ago</small>
@@ -405,7 +638,7 @@
                   <div class="row row-0 flex-fill">
                     <div class="col-md-3">
                       <a href="#">
-                      <img src="./img/photos//35b88fc04a518c1b.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                        <img src="./static/photos//35b88fc04a518c1b.jpg" class="w-100 h-100 object-cover" alt="Card side image">
                       </a>
                     </div>
                     <div class="col">
@@ -413,7 +646,7 @@
                         <h3 class="card-title"><a href="#">Well, I didn't vote for you.</a></h3>
                         <div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
                         <div class="d-flex align-items-center pt-5 mt-auto">
-                        <span class="avatar avatar-md" style="background-image: url(./img/avatars/003m.jpg)"></span>
+                          <span class="avatar avatar-md" style="background-image: url(./static/avatars/003m.jpg)"></span>
                           <div class="ml-3">
                             <a href="./profile.html" class="text-body">Emmy Levet</a>
                             <small class="d-block text-muted">3 days ago</small>
@@ -434,7 +667,7 @@
                   <div class="row row-0 flex-fill">
                     <div class="col-md-3">
                       <a href="#">
-                      <img src="./img/photos//802a16cdf5ce3551.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                        <img src="./static/photos//802a16cdf5ce3551.jpg" class="w-100 h-100 object-cover" alt="Card side image">
                       </a>
                     </div>
                     <div class="col">
@@ -442,7 +675,7 @@
                         <h3 class="card-title"><a href="#">Weaseling out of things is important to learn.</a></h3>
                         <div class="text-muted">Please do not offer my god a peanut. That's why I love elementary school, Edna. The children believe anything you tell them. Brace yourselves gentlemen. According to the gas chromatograph, the secr...</div>
                         <div class="d-flex align-items-center pt-5 mt-auto">
-                        <span class="avatar avatar-md" style="background-image: url(./img/avatars/004f.jpg)"></span>
+                          <span class="avatar avatar-md" style="background-image: url(./static/avatars/004f.jpg)"></span>
                           <div class="ml-3">
                             <a href="./profile.html" class="text-body">Perren Keemar</a>
                             <small class="d-block text-muted">3 days ago</small>
@@ -463,7 +696,7 @@
                   <div class="row row-0 flex-fill">
                     <div class="col-md-3">
                       <a href="#">
-                      <img src="./img/photos//0986f97be719fb9a.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                        <img src="./static/photos//0986f97be719fb9a.jpg" class="w-100 h-100 object-cover" alt="Card side image">
                       </a>
                     </div>
                     <div class="col">
@@ -471,7 +704,7 @@
                         <h3 class="card-title"><a href="#">You don't like your job, you don't strike.</a></h3>
                         <div class="text-muted">But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've wasted my life. Son, when you participate in sporting events, it's not whether you win or lose: it's...</div>
                         <div class="d-flex align-items-center pt-5 mt-auto">
-                        <span class="avatar avatar-md" style="background-image: url(./img/avatars/007m.jpg)"></span>
+                          <span class="avatar avatar-md" style="background-image: url(./static/avatars/007m.jpg)"></span>
                           <div class="ml-3">
                             <a href="./profile.html" class="text-body">Sunny Airey</a>
                             <small class="d-block text-muted">3 days ago</small>
@@ -491,47 +724,11 @@
           </main>
         </div>
       </div>
-    <script>
+    </div>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
     <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
     <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <!-- Tabler Plugins -->
+    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
   </body>
 </html>

demo/buttons.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,60 +24,49 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Buttons - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -102,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -113,18 +101,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -132,105 +118,362 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
-            <li class="nav-item dropdown">
+                <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
+			aria-expanded="true" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item active" href="./buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="./charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="./users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="./layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="./docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
+            <!-- Page title -->
+            <div class="page-title-box">
+              <div class="row align-items-center">
+                <div class="col-auto">
+                  <h2 class="page-title">
+                    Buttons
+                  </h2>
+                </div>
+              </div>
+            </div>
             <div class="row">
               <div class="col-12">
                 <div class="card">
@@ -838,6 +1081,113 @@
                     </div>
                   </div>
                 </div>
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Icon buttons</h3>
+                  </div>
+                  <div class="card-body">
+                    <div class="row row-sm align-items-center mb-n3">
+                      <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
+                        <a href="#" class="btn btn-facebook btn-block btn-icon" aria-label="Facebook">
+                          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                            <path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"/>
+                          </svg>
+                        </a>
+                      </div>
+                      <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
+                        <a href="#" class="btn btn-twitter btn-block btn-icon" aria-label="Twitter">
+                          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                            <path d="M23.954 4.569a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.061a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.937 4.937 0 0 0 4.604 3.417 9.868 9.868 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 0 0 2.46-2.548l-.047-.02z"/>
+                          </svg>
+                        </a>
+                      </div>
+                      <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
+                        <a href="#" class="btn btn-google btn-block btn-icon" aria-label="Google">
+                          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                            <path d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"/>
+                          </svg>
+                        </a>
+                      </div>
+                      <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
+                        <a href="#" class="btn btn-youtube btn-block btn-icon" aria-label="Youtube">
+                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" fill="currentColor">
+                            <path d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/>
+                          </svg>
+                        </a>
+                      </div>
+                      <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
+                        <a href="#" class="btn btn-vimeo btn-block btn-icon" aria-label="Vimeo">
+                          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                            <path d="M23.977 6.416c-.105 2.338-1.739 5.543-4.894 9.609-3.268 4.247-6.026 6.37-8.29 6.37-1.409 0-2.578-1.294-3.553-3.881L5.322 11.4C4.603 8.816 3.834 7.522 3.01 7.522c-.179 0-.806.378-1.881 1.132L0 7.197a315.065 315.065 0 0 0 3.501-3.128C5.08 2.701 6.266 1.984 7.055 1.91c1.867-.18 3.016 1.1 3.447 3.838.465 2.953.789 4.789.971 5.507.539 2.45 1.131 3.674 1.776 3.674.502 0 1.256-.796 2.265-2.385 1.004-1.589 1.54-2.797 1.612-3.628.144-1.371-.395-2.061-1.614-2.061-.574 0-1.167.121-1.777.391 1.186-3.868 3.434-5.757 6.762-5.637 2.473.06 3.628 1.664 3.493 4.797l-.013.01z"/>
+                          </svg>
+                        </a>
+                      </div>
+                      <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
+                        <a href="#" class="btn btn-dribbble btn-block btn-icon" aria-label="Dribbble">
+                          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                            <path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308a10.28 10.28 0 0 0 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4a10.161 10.161 0 0 0 6.29 2.166c1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248a65.473 65.473 0 0 0-3.8-5.928 10.275 10.275 0 0 0-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702A10.19 10.19 0 0 0 12 1.764c-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38z"/>
+                          </svg>
+                        </a>
+                      </div>
+                      <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
+                        <a href="#" class="btn btn-github btn-block btn-icon" aria-label="Github">
+                          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                            <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                          </svg>
+                        </a>
+                      </div>
+                      <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
+                        <a href="#" class="btn btn-instagram btn-block btn-icon" aria-label="Instagram">
+                          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                            <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913a5.885 5.885 0 0 0 1.384 2.126A5.868 5.868 0 0 0 4.14 23.37c.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558a5.898 5.898 0 0 0 2.126-1.384 5.86 5.86 0 0 0 1.384-2.126c.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913a5.89 5.89 0 0 0-1.384-2.126A5.847 5.847 0 0 0 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227a3.81 3.81 0 0 1-.899 1.382 3.744 3.744 0 0 1-1.38.896c-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421a3.716 3.716 0 0 1-1.379-.899 3.644 3.644 0 0 1-.9-1.38c-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 1 0 0-12.324zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405a1.441 1.441 0 0 1-2.88 0 1.44 1.44 0 0 1 2.88 0z"/>
+                          </svg>
+                        </a>
+                      </div>
+                      <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
+                        <a href="#" class="btn btn-pinterest btn-block btn-icon" aria-label="Pinterest">
+                          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                            <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/>
+                          </svg>
+                        </a>
+                      </div>
+                      <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
+                        <a href="#" class="btn btn-vk btn-block btn-icon" aria-label="VK">
+                          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                            <path d="M11.701 18.771h1.437s.433-.047.654-.284c.21-.221.21-.63.21-.63s-.031-1.927.869-2.21c.887-.281 2.012 1.86 3.211 2.683.916.629 1.605.494 1.605.494l3.211-.044s1.682-.105.887-1.426c-.061-.105-.451-.975-2.371-2.76-2.012-1.861-1.742-1.561.676-4.787 1.469-1.965 2.07-3.166 1.875-3.676-.166-.48-1.26-.361-1.26-.361l-3.602.031s-.27-.031-.465.09c-.195.119-.314.391-.314.391s-.572 1.529-1.336 2.82c-1.623 2.729-2.268 2.879-2.523 2.699-.604-.391-.449-1.58-.449-2.432 0-2.641.404-3.75-.781-4.035-.39-.091-.681-.15-1.685-.166-1.29-.014-2.378.01-2.995.311-.405.203-.72.652-.539.675.24.03.779.146 1.064.537.375.506.359 1.636.359 1.636s.211 3.116-.494 3.503c-.495.262-1.155-.28-2.595-2.756-.735-1.26-1.291-2.67-1.291-2.67s-.105-.256-.299-.406c-.227-.165-.557-.225-.557-.225l-3.435.03s-.51.016-.689.24c-.166.195-.016.615-.016.615s2.686 6.287 5.732 9.453c2.79 2.902 5.956 2.715 5.956 2.715l-.05-.055z"/>
+                          </svg>
+                        </a>
+                      </div>
+                      <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
+                        <a href="#" class="btn btn-rss btn-block btn-icon" aria-label="RSS">
+                          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                            <path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415a3.3 3.3 0 0 1 3.293 3.295A3.303 3.303 0 0 1 3.283 24C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/>
+                          </svg>
+                        </a>
+                      </div>
+                      <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
+                        <a href="#" class="btn btn-flickr btn-block btn-icon" aria-label="Flickr">
+                          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                            <path d="M0 12a5.565 5.565 0 0 0 5.565 5.564c3.075 0 5.569-2.49 5.569-5.564S8.641 6.436 5.565 6.436A5.566 5.566 0 0 0 0 12zm12.866 0a5.565 5.565 0 0 0 5.567 5.564C21.496 17.564 24 15.074 24 12s-2.492-5.564-5.564-5.564A5.567 5.567 0 0 0 12.866 12z"/>
+                          </svg>
+                        </a>
+                      </div>
+                      <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
+                        <a href="#" class="btn btn-bitbucket btn-block btn-icon" aria-label="Bitbucker">
+                          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                            <path d="M.778 1.211a.768.768 0 0 0-.768.892l3.263 19.811c.084.499.515.867 1.022.872H19.95a.772.772 0 0 0 .77-.646l3.27-20.03a.768.768 0 0 0-.768-.891L.778 1.211zM14.52 15.528H9.522L8.17 8.464h7.561l-1.211 7.064z"/>
+                          </svg>
+                        </a>
+                      </div>
+                      <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
+                        <a href="#" class="btn btn-tabler btn-block btn-icon" aria-label="Tabler">
+                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" fill="currentColor">
+                            <path d="M23.5 5.3C22.9 3 21 1.1 18.7.5 14.3-.2 9.8-.2 5.4.5 3 1.1 1.1 3 .5 5.3c-.7 4.4-.7 8.9 0 13.3.6 2.4 2.5 4.3 4.8 4.9 4.4.7 8.9.7 13.3 0 2.4-.6 4.2-2.4 4.8-4.8.8-4.5.8-8.9.1-13.4zm-11.8 7.6c-1 1.6-2.5 3.1-4.2 4.1-.6.3-1.2.3-1.8 0s-.9-.9-.9-1.5.3-1.2.9-1.5c.9-.5 1.6-1.2 2.3-2-.7-.8-1.4-1.4-2.3-2-.8-.5-1.1-1.6-.6-2.4S6.7 6.5 7.5 7c1.7 1 3.1 2.4 4.2 4.1.4.5.4 1.2 0 1.8zm6 3.6h-4.3c-.8 0-1.4-.4-1.4-1.1 0-.7.6-1.1 1.4-1.1h4.3c.8 0 1.4.4 1.4 1.1 0 .7-.6 1.1-1.4 1.1z"/>
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
                 <div class="card">
                   <div class="card-header">
                     <h3 class="card-title">Social colors</h3>
@@ -964,47 +1314,11 @@
           </main>
         </div>
       </div>
-    <script>
+    </div>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
     <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
     <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <!-- Tabler Plugins -->
+    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
   </body>
 </html>

demo/calendar.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,60 +24,49 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Calendar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -102,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -113,18 +101,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -132,104 +118,351 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
-            <li class="nav-item dropdown">
+                <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
+			aria-expanded="true" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item active" href="./calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="./charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item active">
+                  </ul>
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="./users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="./layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="./docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -240,7 +473,7 @@
                   </h2>
                 </div>
                 <!-- Page title actions -->
-              <div class="col-auto ml-auto">
+                <div class="col-auto ml-auto d-print-none">
                   <div class="d-flex">
                     <a href="#" class="btn btn-primary">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
@@ -258,45 +491,17 @@
           </main>
         </div>
       </div>
-    <script>
+    </div>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
     <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+    <script src="./dist/libs/fullcalendar/core/main.min.js?1580339009"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+    <script src="./dist/libs/fullcalendar/daygrid/main.min.js?1580339009"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+    <script src="./dist/libs/fullcalendar/interaction/main.min.js?1580339009"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+    <script src="./dist/libs/fullcalendar/timegrid/main.min.js?1580339009"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+    <script src="./dist/libs/fullcalendar/list/main.min.js?1580339009"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
     <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <!-- Tabler Plugins -->
+    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
     <script>
       document.addEventListener('DOMContentLoaded', function () {
             var calendarEl = document.getElementById('calendar-main'),
@@ -372,8 +577,5 @@
          })).render();
       });
     </script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
   </body>
 </html>

demo/cards.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,60 +24,49 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Cards - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -102,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -113,18 +101,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -132,104 +118,351 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
-            <li class="nav-item dropdown">
+                <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
+			aria-expanded="true" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item active" href="./cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="./charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="./users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="./layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="./docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -254,7 +487,7 @@
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
                       neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
                   </div>
-                <img src="./img/photos/56614e12b2a7bd68.jpg" class="card-img-bottom"
+                  <img src="./static/photos/56614e12b2a7bd68.jpg" class="card-img-bottom"
            alt="Card bottom image">
                 </div>
                 <div class="card card-active">
@@ -296,11 +529,11 @@
                     <div class="row align-items-center">
                       <div class="col-auto ml-auto">
                         <div class="avatar-list avatar-list-stacked">
-                        <span class="avatar avatar-sm" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                          <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                           <span class="avatar avatar-sm">JL</span>
-                        <span class="avatar avatar-sm" style="background-image: url(./img/avatars/002m.jpg)"></span>
+                          <span class="avatar avatar-sm" style="background-image: url(./static/avatars/002m.jpg)"></span>
-                        <span class="avatar avatar-sm" style="background-image: url(./img/avatars/003m.jpg)"></span>
+                          <span class="avatar avatar-sm" style="background-image: url(./static/avatars/003m.jpg)"></span>
-                        <span class="avatar avatar-sm" style="background-image: url(./img/avatars/000f.jpg)"></span>
+                          <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000f.jpg)"></span>
                           <span class="avatar avatar-sm">+3</span>
                         </div>
                       </div>
@@ -384,14 +617,15 @@
                 <div class="card">
                   <div class="empty">
                     <div class="empty-icon">
-                    <img src="./img/illustrations/undraw_quitting_time_dm8t.svg" class="h-8 mb-4" alt="">
+                      <img src="./static/illustrations/undraw_quitting_time_dm8t.svg" class="h-8 mb-4" alt="">
                     </div>
                     <p class="empty-title h3">No results found</p>
                     <p class="empty-subtitle text-muted">
                       Try adjusting your search or filter to find what you're looking for.
                     </p>
                     <div class="empty-action">
-                    <a href="#" class="btn btn-primary">
+                      <a href="./." class="btn btn-primary">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                         Search again
                       </a>
                     </div>
@@ -498,7 +732,7 @@
                 <div class="card">
                   <div class="row row-0">
                     <div class="col-md-3">
-                    <img src="./img/photos/2854fd67ddbd6217.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                      <img src="./static/photos/2854fd67ddbd6217.jpg" class="w-100 h-100 object-cover" alt="Card side image">
                     </div>
                     <div class="col">
                       <div class="card-body">
@@ -512,7 +746,7 @@
                 <div class="card">
                   <div class="row row-0">
                     <div class="col-md-3 order-md-last">
-                    <img src="./img/photos/de6d0fd1feebb6a2.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                      <img src="./static/photos/de6d0fd1feebb6a2.jpg" class="w-100 h-100 object-cover" alt="Card side image">
                     </div>
                     <div class="col">
                       <div class="card-body">
@@ -543,7 +777,7 @@
                 <div class="row">
                   <div class="col-xl-6">
                     <div class="card">
-                    <img src="./img/photos/9f36332564ca271d.jpg" class="card-img-top" alt="Card top image">
+                      <img src="./static/photos/9f36332564ca271d.jpg" class="card-img-top" alt="Card top image">
                       <div class="card-body">
                         <h3 class="card-title">Card with top image</h3>
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
@@ -653,47 +887,11 @@
           </main>
         </div>
       </div>
-    <script>
+    </div>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
     <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
     <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <!-- Tabler Plugins -->
+    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
   </body>
 </html>

demo/carousel.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,60 +24,49 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Carousel - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -102,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -113,18 +101,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -132,104 +118,351 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
-            <li class="nav-item dropdown">
+                <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-         aria-expanded="false" >
+			aria-expanded="true" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item active" href="./carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="./charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="./users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="./layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="./docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -251,19 +484,19 @@
                     <div id="carousel-default" class="carousel slide" data-ride="carousel">
                       <div class="carousel-inner">
                         <div class="carousel-item active">
-                        <img class="d-block w-100" alt="" src="./img/photos/1b73704b282a8ec6.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/1b73704b282a8ec6.jpg" data-holder-rendered="true">
                         </div>
                         <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./img/photos/3d2998219313cd37.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/3d2998219313cd37.jpg" data-holder-rendered="true">
                         </div>
                         <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./img/photos/6ab3200b14549f8a.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/6ab3200b14549f8a.jpg" data-holder-rendered="true">
                         </div>
                         <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./img/photos/6d35d9a2bd6c63c2.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/6d35d9a2bd6c63c2.jpg" data-holder-rendered="true">
                         </div>
                         <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./img/photos/8a26974ee6444acd.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/8a26974ee6444acd.jpg" data-holder-rendered="true">
                         </div>
                       </div>
                     </div>
@@ -286,19 +519,19 @@
                       </ol>
                       <div class="carousel-inner">
                         <div class="carousel-item active">
-                        <img class="d-block w-100" alt="" src="./img/photos/8c13ad59f739558c.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/8c13ad59f739558c.jpg" data-holder-rendered="true">
                         </div>
                         <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./img/photos/8fdeb4785d2b82ef.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/8fdeb4785d2b82ef.jpg" data-holder-rendered="true">
                         </div>
                         <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./img/photos/9f36332564ca271d.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/9f36332564ca271d.jpg" data-holder-rendered="true">
                         </div>
                         <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./img/photos/35b88fc04a518c1b.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/35b88fc04a518c1b.jpg" data-holder-rendered="true">
                         </div>
                         <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./img/photos/36e273986ed577b8.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/36e273986ed577b8.jpg" data-holder-rendered="true">
                         </div>
                       </div>
                     </div>
@@ -314,19 +547,19 @@
                     <div id="carousel-controls" class="carousel slide" data-ride="carousel">
                       <div class="carousel-inner">
                         <div class="carousel-item active">
-                        <img class="d-block w-100" alt="" src="./img/photos/75b555b99d5b38c4.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/75b555b99d5b38c4.jpg" data-holder-rendered="true">
                         </div>
                         <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./img/photos/546fd146c83f428c.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/546fd146c83f428c.jpg" data-holder-rendered="true">
                         </div>
                         <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./img/photos/802a16cdf5ce3551.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/802a16cdf5ce3551.jpg" data-holder-rendered="true">
                         </div>
                         <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./img/photos/0986f97be719fb9a.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/0986f97be719fb9a.jpg" data-holder-rendered="true">
                         </div>
                         <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./img/photos/1194d63fe36a8670.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/1194d63fe36a8670.jpg" data-holder-rendered="true">
                         </div>
                       </div>
                       <a class="carousel-control-prev" href="#carousel-controls" role="button" data-slide="prev">
@@ -350,7 +583,7 @@
                     <div id="carousel-captions" class="carousel slide" data-ride="carousel">
                       <div class="carousel-inner">
                         <div class="carousel-item active">
-                        <img class="d-block w-100" alt="" src="./img/photos/1366fdc9b9b277e4.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/1366fdc9b9b277e4.jpg" data-holder-rendered="true">
                           <div class="carousel-item-background d-none d-md-block"></div>
                           <div class="carousel-caption d-none d-md-block">
                             <h3>Slide label</h3>
@@ -358,7 +591,7 @@
                           </div>
                         </div>
                         <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./img/photos/5358d787242861c4.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/5358d787242861c4.jpg" data-holder-rendered="true">
                           <div class="carousel-item-background d-none d-md-block"></div>
                           <div class="carousel-caption d-none d-md-block">
                             <h3>Slide label</h3>
@@ -366,7 +599,7 @@
                           </div>
                         </div>
                         <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./img/photos/5614ec7eb9034d04.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/5614ec7eb9034d04.jpg" data-holder-rendered="true">
                           <div class="carousel-item-background d-none d-md-block"></div>
                           <div class="carousel-caption d-none d-md-block">
                             <h3>Slide label</h3>
@@ -374,7 +607,7 @@
                           </div>
                         </div>
                         <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./img/photos/56614e12b2a7bd68.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/56614e12b2a7bd68.jpg" data-holder-rendered="true">
                           <div class="carousel-item-background d-none d-md-block"></div>
                           <div class="carousel-caption d-none d-md-block">
                             <h3>Slide label</h3>
@@ -382,7 +615,7 @@
                           </div>
                         </div>
                         <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./img/photos/77586f6ffa9fbc5e.jpg" data-holder-rendered="true">
+                          <img class="d-block w-100" alt="" src="./static/photos/77586f6ffa9fbc5e.jpg" data-holder-rendered="true">
                           <div class="carousel-item-background d-none d-md-block"></div>
                           <div class="carousel-caption d-none d-md-block">
                             <h3>Slide label</h3>
@@ -406,47 +639,11 @@
           </main>
         </div>
       </div>
-    <script>
+    </div>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
     <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
     <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <!-- Tabler Plugins -->
+    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
   </body>
 </html>

demo/changelog.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,60 +24,49 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Changelog - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -102,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -113,18 +101,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -132,9 +118,7 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -143,93 +127,342 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="./charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="./users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="./layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="./docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -246,7 +479,7 @@
                 <div class="mb-4">
                   <div class="mb-2">
                     <span class="badge bg-blue-lt">1.0.0</span> —
-                  <span class="text-muted">December 15, 2019</span>
+                    <span class="text-muted">January 30, 2020</span>
                   </div>
                   <div>
                     <p>Coming soon</p>
@@ -257,47 +490,11 @@
           </main>
         </div>
       </div>
-    <script>
+    </div>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
     <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
     <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <!-- Tabler Plugins -->
+    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
   </body>
 </html>

demo/charts-heatmap.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,60 +24,49 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Heatmap Charts - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -102,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -113,18 +101,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -132,9 +118,7 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -143,93 +127,342 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="./charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="./users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="./layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="./docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -477,47 +710,11 @@
           </main>
         </div>
       </div>
-    <script>
+    </div>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
     <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
     <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <!-- Tabler Plugins -->
+    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
   </body>
 </html>

demo/components.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en-US">
   <meta charset="utf-8">
-  <title>Redirecting&hellip;</title>
+  <title>Redirecting…</title>
   <link rel="canonical" href="./components/card-buttons.html">
   <meta http-equiv="refresh" content="0; url=./components/card-buttons.html">
   <meta name="robots" content="noindex">

demo/components/card-buttons.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -38,60 +37,49 @@
     <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
     <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -115,7 +103,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -126,18 +114,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -145,9 +131,7 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -156,93 +140,342 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
+                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="../charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../404.html" class="dropdown-item">404 page</a>
+                        <a href="../500.html" class="dropdown-item">500 page</a>
+                        <a href="../503.html" class="dropdown-item">503 page</a>
+                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="../tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -349,47 +582,11 @@
         </main>
       </div>
     </div>
-  <script>
+  </div>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
   <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
   <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
 </body>
 </html>

demo/components/card-comments.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -24,74 +23,63 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <title>Comments card - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-comments.png">
     <meta name="twitter:site" content="@tabler_ui">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
     <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-comments.png">
     <meta property="og:image:width" content="1280">
     <meta property="og:image:height" content="640">
     <meta property="og:site_name" content="Tabler">
     <meta property="og:type" content="object">
     <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-comments.html">
     <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -115,7 +103,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -126,18 +114,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -145,9 +131,7 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -156,93 +140,342 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
+                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="../charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../404.html" class="dropdown-item">404 page</a>
+                        <a href="../500.html" class="dropdown-item">500 page</a>
+                        <a href="../503.html" class="dropdown-item">503 page</a>
+                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="../tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -287,7 +520,7 @@
                             <div class="card-body">
                               <div class="d-flex mb-5">
                                 <div class="mr-4">
-                                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)">
+                                  <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)">
                                     <span class="badge bg-green"></span>
                                   </span>
                                 </div>
@@ -347,7 +580,7 @@
                               </div>
                               <div class="d-flex">
                                 <div class="mr-4">
-                                <span class="avatar" style="background-image: url(../img/avatars/002m.jpg)">
+                                  <span class="avatar" style="background-image: url(../static/avatars/002m.jpg)">
                                     <span class="badge bg-green"></span>
                                   </span>
                                 </div>
@@ -388,7 +621,7 @@
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-5"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-4"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/000m.jpg)"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./static/avatars/000m.jpg)"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
             <span class="nt">&lt;/span&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
@@ -448,7 +681,7 @@
       <span class="nt">&lt;/div&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-4"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/002m.jpg)"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./static/avatars/002m.jpg)"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
             <span class="nt">&lt;/span&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
@@ -495,7 +728,7 @@
                             \n   
                             <div class=\"card-body\">\n\n      \n      
                               <div class=\"d-flex mb-5\">\n         
-                              <div class=\"mr-4\">\n            <span class=\"avatar\" style=\"background-image: url(../img/avatars/000m.jpg)\">\n  <span class=\"badge bg-green\"></span>\n</span>\n\n         </div>
+                                <div class=\"mr-4\">\n            <span class=\"avatar\" style=\"background-image: url(../static/avatars/000m.jpg)\">\n  <span class=\"badge bg-green\"></span>\n</span>\n\n         </div>
                                 \n         
                                 <div class=\"flex-fill\">\n            
                                   <div class=\"d-flex mt-n1\">\n               
@@ -527,7 +760,7 @@
                                 \n      </div>
                               \n      \n      
                               <div class=\"d-flex\">\n         
-                              <div class=\"mr-4\">\n            <span class=\"avatar\" style=\"background-image: url(../img/avatars/002m.jpg)\">\n  <span class=\"badge bg-green\"></span>\n</span>\n\n         </div>
+                                <div class=\"mr-4\">\n            <span class=\"avatar\" style=\"background-image: url(../static/avatars/002m.jpg)\">\n  <span class=\"badge bg-green\"></span>\n</span>\n\n         </div>
                                 \n         
                                 <div class=\"flex-fill\">\n            
                                   <div class=\"d-flex mt-n1\">\n               
@@ -559,47 +792,11 @@
         </main>
       </div>
     </div>
-  <script>
+  </div>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
   <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
   <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
 </body>
 </html>

demo/components/card-ribbon.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -24,74 +23,63 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <title>Card with ribbon - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-ribbon.png">
     <meta name="twitter:site" content="@tabler_ui">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
     <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-ribbon.png">
     <meta property="og:image:width" content="1280">
     <meta property="og:image:height" content="640">
     <meta property="og:site_name" content="Tabler">
     <meta property="og:type" content="object">
     <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-ribbon.html">
     <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -115,7 +103,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -126,18 +114,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -145,9 +131,7 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -156,93 +140,342 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
+                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="../charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../404.html" class="dropdown-item">404 page</a>
+                        <a href="../500.html" class="dropdown-item">500 page</a>
+                        <a href="../503.html" class="dropdown-item">503 page</a>
+                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="../tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -309,11 +542,11 @@
                         <form action="https://codepen.io/pen/define" method="post" target="_blank">
                           <input type="hidden" name="data" value='{"title":"Card with ribbon","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n\n\n
                           <div class=\"card\">\n\t
-                          <div class=\"card-body\">\n      \n      
+                            <div class=\"card-body\">\n\t\t\n\t\t\t
                               <h3 class=\"card-title\">Card with ribbon</h3>
-                            \n      
+                              \n\t\t\t
                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.</p>
-                            \n      \n\t</div>
+                              \n\t\t\n\t</div>
                             \n\n\t
                             <div class=\"ribbon ribbon-bookmark bg-orange\">-10%</div>
                             \n</div>
@@ -333,47 +566,11 @@
         </main>
       </div>
     </div>
-  <script>
+  </div>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
   <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
   <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
 </body>
 </html>

demo/components/card-tabs-bottom.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -24,74 +23,63 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <title>Card with bottom tabs - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-tabs-bottom.png">
     <meta name="twitter:site" content="@tabler_ui">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
     <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-tabs-bottom.png">
     <meta property="og:image:width" content="1280">
     <meta property="og:image:height" content="640">
     <meta property="og:site_name" content="Tabler">
     <meta property="og:type" content="object">
     <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-tabs-bottom.html">
     <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -115,7 +103,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -126,18 +114,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -145,9 +131,7 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -156,93 +140,342 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
+                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="../charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../404.html" class="dropdown-item">404 page</a>
+                        <a href="../500.html" class="dropdown-item">500 page</a>
+                        <a href="../503.html" class="dropdown-item">503 page</a>
+                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="../tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -451,47 +684,11 @@
         </main>
       </div>
     </div>
-  <script>
+  </div>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
   <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
   <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
 </body>
 </html>

demo/components/card-with-image.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -24,74 +23,63 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <title>Card with side image - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-with-image.png">
     <meta name="twitter:site" content="@tabler_ui">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
     <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-with-image.png">
     <meta property="og:image:width" content="1280">
     <meta property="og:image:height" content="640">
     <meta property="og:site_name" content="Tabler">
     <meta property="og:type" content="object">
     <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-with-image.html">
     <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -115,7 +103,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -126,18 +114,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -145,9 +131,7 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -156,93 +140,342 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
+                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="../charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../404.html" class="dropdown-item">404 page</a>
+                        <a href="../500.html" class="dropdown-item">500 page</a>
+                        <a href="../503.html" class="dropdown-item">503 page</a>
+                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="../tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -283,7 +516,7 @@
                           <div class="card">
                             <div class="row row-0">
                               <div class="col-md-3">
-                              <img src="../img/photos/2854fd67ddbd6217.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                                <img src="../static/photos/2854fd67ddbd6217.jpg" class="w-100 h-100 object-cover" alt="Card side image">
                               </div>
                               <div class="col">
                                 <div class="card-body">
@@ -301,7 +534,7 @@
                       <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-0"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-3"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/2854fd67ddbd6217.jpg"</span> <span class="na">class=</span><span class="s">"w-100 h-100 object-cover"</span> <span class="na">alt=</span><span class="s">"Card side image"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/2854fd67ddbd6217.jpg"</span> <span class="na">class=</span><span class="s">"w-100 h-100 object-cover"</span> <span class="na">alt=</span><span class="s">"Card side image"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;/div&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
@@ -324,7 +557,7 @@
                           <input type="hidden" name="data" value='{"title":"Card with side image","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
                           <div class=\"card\">\n   
                             <div class=\"row row-0\">\n      
-                            <div class=\"col-md-3\">\n         <img src=\"../img/photos/2854fd67ddbd6217.jpg\" class=\"w-100 h-100 object-cover\" alt=\"Card side image\">\n      </div>
+                              <div class=\"col-md-3\">\n         <img src=\"../static/photos/2854fd67ddbd6217.jpg\" class=\"w-100 h-100 object-cover\" alt=\"Card side image\">\n      </div>
                               \n      
                               <div class=\"col\">\n         
                                 <div class=\"card-body\">\n            \n            
@@ -351,47 +584,11 @@
         </main>
       </div>
     </div>
-  <script>
+  </div>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
   <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
   <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
 </body>
 </html>

demo/components/empty.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -24,74 +23,63 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <title>Empty state - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/empty.png">
     <meta name="twitter:site" content="@tabler_ui">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
     <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/empty.png">
     <meta property="og:image:width" content="1280">
     <meta property="og:image:height" content="640">
     <meta property="og:site_name" content="Tabler">
     <meta property="og:type" content="object">
     <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/empty.html">
     <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -115,7 +103,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -126,18 +114,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -145,9 +131,7 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -156,93 +140,342 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
+                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="../charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../404.html" class="dropdown-item">404 page</a>
+                        <a href="../500.html" class="dropdown-item">500 page</a>
+                        <a href="../503.html" class="dropdown-item">503 page</a>
+                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="../tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -282,14 +515,15 @@
                         <div >
                           <div class="empty">
                             <div class="empty-icon">
-                            <img src="../img/illustrations/undraw_quitting_time_dm8t.svg" class="h-8 mb-4" alt="">
+                              <img src="../static/illustrations/undraw_quitting_time_dm8t.svg" class="h-8 mb-4" alt="">
                             </div>
                             <p class="empty-title h3">No results found</p>
                             <p class="empty-subtitle text-muted">
                               Try adjusting your search or filter to find what you're looking for.
                             </p>
                             <div class="empty-action">
-                            <a href="#" class="btn btn-primary">
+                              <a href="../." class="btn btn-primary">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                                 Search again
                               </a>
                             </div>
@@ -300,14 +534,15 @@
                     <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
                       <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-icon"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/illustrations/undraw_quitting_time_dm8t.svg"</span> <span class="na">class=</span><span class="s">"h-8 mb-4"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/illustrations/undraw_quitting_time_dm8t.svg"</span> <span class="na">class=</span><span class="s">"h-8 mb-4"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-title h3"</span><span class="nt">&gt;</span>No results found<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-subtitle text-muted"</span><span class="nt">&gt;</span>
       Try adjusting your search or filter to find what you're looking for.
    <span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-action"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"./."</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"11"</span> <span class="na">cy=</span><span class="s">"11"</span> <span class="na">r=</span><span class="s">"8"</span><span class="nt">&gt;&lt;/circle&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"21"</span> <span class="na">y1=</span><span class="s">"21"</span> <span class="na">x2=</span><span class="s">"16.65"</span> <span class="na">y2=</span><span class="s">"16.65"</span><span class="nt">&gt;&lt;/line&gt;&lt;/svg&gt;</span>
          Search again
       <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
@@ -323,18 +558,18 @@
                         <form action="https://codepen.io/pen/define" method="post" target="_blank">
                           <input type="hidden" name="data" value='{"title":"Empty state","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n
                           <div class=\"empty\">\n   
-                          <div class=\"empty-icon\">\n      \n      \n      <img src=\"../img/illustrations/undraw_quitting_time_dm8t.svg\" class=\"h-8 mb-4\" alt=\"\">\n      \n   </div>
+                            <div class=\"empty-icon\">\n      \n      \n      <img src=\"../static/illustrations/undraw_quitting_time_dm8t.svg\" class=\"h-8 mb-4\" alt=\"\">\n\n      \n   </div>
                             \n\n   
                             <p class=\"empty-title h3\">No results found</p>
                             \n   
                             <p class=\"empty-subtitle text-muted\">\n      Try adjusting your search or filter to find what youre looking for.\n   </p>
                             \n   
-                          <div class=\"empty-action\">\n      \n      <a href=\"#\" class=\"btn btn-primary\">\nSearch again\n</a>\n\n   </div>
+                            <div class=\"empty-action\">\n      \n      \n      <a href=\"../.\" class=\"btn btn-primary\">\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\nSearch again\n</a>\n\n   </div>
                             \n</div>
                           \n\n\n</div>
                         \nre looking for.\n   </p>
                       \n   
-                    <div class=\"empty-action\">\n      \n      <a href=\"#\" class=\"btn btn-primary\">\nSearch again\n</a>\n\n   </div>
+                      <div class=\"empty-action\">\n      \n      \n      <a href=\"../.\" class=\"btn btn-primary\">\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\nSearch again\n</a>\n\n   </div>
                       \n</div>
                     \n\n\n</div>
                   \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
@@ -352,47 +587,11 @@
   </main>
 </div>
 </div>
-<script>
+</div>
-  window.tabler_colors = {
-  'blue': '#206bc4',
-  'azure': '#45aaf2',
-  'indigo': '#6574cd',
-  'purple': '#a55eea',
-  'pink': '#f66d9b',
-  'red': '#fa4654',
-  'orange': '#fd9644',
-  'yellow': '#f1c40f',
-  'lime': '#7bd235',
-  'green': '#5eba00',
-  'teal': '#2bcbba',
-  'cyan': '#17a2b8',
-  'gray': '#868e96',
-  };
-</script>
 <!-- Libs JS -->
-<script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+<script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-<script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-<script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-<script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-<script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-<script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-<script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-<script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-<script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-<script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-<script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-<script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-<script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-<script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
 <!-- Tabler Core -->
-<script src="../dist/js/tabler.min.js?1576401968"></script>
+<script src="../dist/js/tabler.min.js?1580339009"></script>
-<!-- Tabler Plugins -->
+<script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-<script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-<script>
-  document.body.style.display = 'block';
-</script>
 </body>
 </html>

demo/components/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en-US">
   <meta charset="utf-8">
-  <title>Redirecting&hellip;</title>
+  <title>Redirecting…</title>
   <link rel="canonical" href="../components.html">
   <meta http-equiv="refresh" content="0; url=../components.html">
   <meta name="robots" content="noindex">

demo/components/input-colors.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -24,74 +23,63 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <title>Color input - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/input-colors.png">
     <meta name="twitter:site" content="@tabler_ui">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
     <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/input-colors.png">
     <meta property="og:image:width" content="1280">
     <meta property="og:image:height" content="640">
     <meta property="og:site_name" content="Tabler">
     <meta property="og:type" content="object">
     <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/input-colors.html">
     <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -115,7 +103,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -126,18 +114,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -145,9 +131,7 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -156,93 +140,342 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
+                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="../charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../404.html" class="dropdown-item">404 page</a>
+                        <a href="../500.html" class="dropdown-item">500 page</a>
+                        <a href="../503.html" class="dropdown-item">503 page</a>
+                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="../tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -284,63 +517,69 @@
                             <label class="form-label">Color Input</label>
                             <div class="row row-xs">
                               <div class="col-auto">
-                              <label class="colorinput">
+                                <label class="form-colorinput">
-                                <input name="color" type="checkbox" value="blue" class="colorinput-input" />
+                                  <input name="color" type="checkbox" value="dark" class="form-colorinput-input" />
-                                <span class="colorinput-color bg-blue"></span>
+                                  <span class="form-colorinput-color bg-dark"></span>
                                 </label>
                               </div>
                               <div class="col-auto">
-                              <label class="colorinput">
+                                <label class="form-colorinput form-colorinput-light">
-                                <input name="color" type="checkbox" value="azure" class="colorinput-input"  checked/>
+                                  <input name="color" type="checkbox" value="white" class="form-colorinput-input"  checked/>
-                                <span class="colorinput-color bg-azure"></span>
+                                  <span class="form-colorinput-color bg-white"></span>
                                 </label>
                               </div>
                               <div class="col-auto">
-                              <label class="colorinput">
+                                <label class="form-colorinput">
-                                <input name="color" type="checkbox" value="indigo" class="colorinput-input" />
+                                  <input name="color" type="checkbox" value="blue" class="form-colorinput-input"  checked/>
-                                <span class="colorinput-color bg-indigo"></span>
+                                  <span class="form-colorinput-color bg-blue"></span>
                                 </label>
                               </div>
                               <div class="col-auto">
-                              <label class="colorinput">
+                                <label class="form-colorinput">
-                                <input name="color" type="checkbox" value="purple" class="colorinput-input" />
+                                  <input name="color" type="checkbox" value="azure" class="form-colorinput-input"  checked/>
-                                <span class="colorinput-color bg-purple"></span>
+                                  <span class="form-colorinput-color bg-azure"></span>
                                 </label>
                               </div>
                               <div class="col-auto">
-                              <label class="colorinput">
+                                <label class="form-colorinput">
-                                <input name="color" type="checkbox" value="pink" class="colorinput-input" />
+                                  <input name="color" type="checkbox" value="indigo" class="form-colorinput-input" />
-                                <span class="colorinput-color bg-pink"></span>
+                                  <span class="form-colorinput-color bg-indigo"></span>
                                 </label>
                               </div>
                               <div class="col-auto">
-                              <label class="colorinput">
+                                <label class="form-colorinput">
-                                <input name="color" type="checkbox" value="red" class="colorinput-input" />
+                                  <input name="color" type="checkbox" value="purple" class="form-colorinput-input" />
-                                <span class="colorinput-color bg-red"></span>
+                                  <span class="form-colorinput-color bg-purple"></span>
                                 </label>
                               </div>
                               <div class="col-auto">
-                              <label class="colorinput">
+                                <label class="form-colorinput">
-                                <input name="color" type="checkbox" value="orange" class="colorinput-input" />
+                                  <input name="color" type="checkbox" value="pink" class="form-colorinput-input" />
-                                <span class="colorinput-color bg-orange"></span>
+                                  <span class="form-colorinput-color bg-pink"></span>
                                 </label>
                               </div>
                               <div class="col-auto">
-                              <label class="colorinput">
+                                <label class="form-colorinput">
-                                <input name="color" type="checkbox" value="yellow" class="colorinput-input" />
+                                  <input name="color" type="checkbox" value="red" class="form-colorinput-input" />
-                                <span class="colorinput-color bg-yellow"></span>
+                                  <span class="form-colorinput-color bg-red"></span>
                                 </label>
                               </div>
                               <div class="col-auto">
-                              <label class="colorinput">
+                                <label class="form-colorinput">
-                                <input name="color" type="checkbox" value="lime" class="colorinput-input" />
+                                  <input name="color" type="checkbox" value="orange" class="form-colorinput-input" />
-                                <span class="colorinput-color bg-lime"></span>
+                                  <span class="form-colorinput-color bg-orange"></span>
                                 </label>
                               </div>
                               <div class="col-auto">
-                              <label class="colorinput">
+                                <label class="form-colorinput">
-                                <input name="color" type="checkbox" value="green" class="colorinput-input" />
+                                  <input name="color" type="checkbox" value="yellow" class="form-colorinput-input" />
-                                <span class="colorinput-color bg-green"></span>
+                                  <span class="form-colorinput-color bg-yellow"></span>
+                                </label>
+                              </div>
+                              <div class="col-auto">
+                                <label class="form-colorinput">
+                                  <input name="color" type="checkbox" value="lime" class="form-colorinput-input" />
+                                  <span class="form-colorinput-color bg-lime"></span>
                                 </label>
                               </div>
                             </div>
@@ -353,63 +592,69 @@
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Color Input<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-xs"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"blue"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"dark"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-blue"</span><span class="nt">&gt;&lt;/span&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-dark"</span><span class="nt">&gt;&lt;/span&gt;</span>
          <span class="nt">&lt;/label&gt;</span>
       <span class="nt">&lt;/div&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput form-colorinput-light"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"azure"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"white"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-azure"</span><span class="nt">&gt;&lt;/span&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-white"</span><span class="nt">&gt;&lt;/span&gt;</span>
          <span class="nt">&lt;/label&gt;</span>
       <span class="nt">&lt;/div&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"indigo"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"blue"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-indigo"</span><span class="nt">&gt;&lt;/span&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-blue"</span><span class="nt">&gt;&lt;/span&gt;</span>
          <span class="nt">&lt;/label&gt;</span>
       <span class="nt">&lt;/div&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"purple"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"azure"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-purple"</span><span class="nt">&gt;&lt;/span&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-azure"</span><span class="nt">&gt;&lt;/span&gt;</span>
          <span class="nt">&lt;/label&gt;</span>
       <span class="nt">&lt;/div&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"pink"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"indigo"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-pink"</span><span class="nt">&gt;&lt;/span&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-indigo"</span><span class="nt">&gt;&lt;/span&gt;</span>
          <span class="nt">&lt;/label&gt;</span>
       <span class="nt">&lt;/div&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"red"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"purple"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-red"</span><span class="nt">&gt;&lt;/span&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-purple"</span><span class="nt">&gt;&lt;/span&gt;</span>
          <span class="nt">&lt;/label&gt;</span>
       <span class="nt">&lt;/div&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"orange"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"pink"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-orange"</span><span class="nt">&gt;&lt;/span&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-pink"</span><span class="nt">&gt;&lt;/span&gt;</span>
          <span class="nt">&lt;/label&gt;</span>
       <span class="nt">&lt;/div&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"yellow"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"red"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-yellow"</span><span class="nt">&gt;&lt;/span&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-red"</span><span class="nt">&gt;&lt;/span&gt;</span>
          <span class="nt">&lt;/label&gt;</span>
       <span class="nt">&lt;/div&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"lime"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"orange"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-lime"</span><span class="nt">&gt;&lt;/span&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-orange"</span><span class="nt">&gt;&lt;/span&gt;</span>
          <span class="nt">&lt;/label&gt;</span>
       <span class="nt">&lt;/div&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"green"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"yellow"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-yellow"</span><span class="nt">&gt;&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"lime"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-lime"</span><span class="nt">&gt;&lt;/span&gt;</span>
          <span class="nt">&lt;/label&gt;</span>
       <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
@@ -423,28 +668,30 @@
                       </div>
                       <div class="col">
                         <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                        <input type="hidden" name="data" value='{"title":"Color input","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
+                          <input type="hidden" name="data" value='{"title":"Color input","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n\n\n
                           <div class=\"mb-3\">\n\t<label class=\"form-label\">Color Input</label>\n\t
                             <div class=\"row row-xs\">\n\t\t\n\t\t
-                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"blue\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-blue\"></span>\n\t\t\t</label>\n\t\t</div>
+                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"dark\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-dark\"></span>\n\t\t\t</label>\n\t\t</div>
                               \n\t\t\n\t\t
-                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"azure\" class=\"colorinput-input\"  checked/>\n\t\t\t\t<span class=\"colorinput-color bg-azure\"></span>\n\t\t\t</label>\n\t\t</div>
+                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput form-colorinput-light\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"white\" class=\"form-colorinput-input\"  checked/>\n\t\t\t\t<span class=\"form-colorinput-color bg-white\"></span>\n\t\t\t</label>\n\t\t</div>
                               \n\t\t\n\t\t
-                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"indigo\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-indigo\"></span>\n\t\t\t</label>\n\t\t</div>
+                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"blue\" class=\"form-colorinput-input\"  checked/>\n\t\t\t\t<span class=\"form-colorinput-color bg-blue\"></span>\n\t\t\t</label>\n\t\t</div>
                               \n\t\t\n\t\t
-                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"purple\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-purple\"></span>\n\t\t\t</label>\n\t\t</div>
+                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"azure\" class=\"form-colorinput-input\"  checked/>\n\t\t\t\t<span class=\"form-colorinput-color bg-azure\"></span>\n\t\t\t</label>\n\t\t</div>
                               \n\t\t\n\t\t
-                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"pink\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-pink\"></span>\n\t\t\t</label>\n\t\t</div>
+                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"indigo\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-indigo\"></span>\n\t\t\t</label>\n\t\t</div>
                               \n\t\t\n\t\t
-                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"red\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-red\"></span>\n\t\t\t</label>\n\t\t</div>
+                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"purple\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-purple\"></span>\n\t\t\t</label>\n\t\t</div>
                               \n\t\t\n\t\t
-                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"orange\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-orange\"></span>\n\t\t\t</label>\n\t\t</div>
+                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"pink\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-pink\"></span>\n\t\t\t</label>\n\t\t</div>
                               \n\t\t\n\t\t
-                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"yellow\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-yellow\"></span>\n\t\t\t</label>\n\t\t</div>
+                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"red\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-red\"></span>\n\t\t\t</label>\n\t\t</div>
                               \n\t\t\n\t\t
-                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"lime\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-lime\"></span>\n\t\t\t</label>\n\t\t</div>
+                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"orange\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-orange\"></span>\n\t\t\t</label>\n\t\t</div>
                               \n\t\t\n\t\t
-                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"green\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-green\"></span>\n\t\t\t</label>\n\t\t</div>
+                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"yellow\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-yellow\"></span>\n\t\t\t</label>\n\t\t</div>
+                              \n\t\t\n\t\t
+                              <div class=\"col-auto\">\n\t\t\t<label class=\"form-colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"lime\" class=\"form-colorinput-input\" />\n\t\t\t\t<span class=\"form-colorinput-color bg-lime\"></span>\n\t\t\t</label>\n\t\t</div>
                               \n\t\t\n\t</div>
                             \n</div>
                           \n\n\n</div>
@@ -463,47 +710,11 @@
         </main>
       </div>
     </div>
-  <script>
+  </div>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
   <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
   <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
 </body>
 </html>

demo/components/input-image.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -24,74 +23,63 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <title>Image input - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/input-image.png">
     <meta name="twitter:site" content="@tabler_ui">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
     <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/input-image.png">
     <meta property="og:image:width" content="1280">
     <meta property="og:image:height" content="640">
     <meta property="og:site_name" content="Tabler">
     <meta property="og:type" content="object">
     <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/input-image.html">
     <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -115,7 +103,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -126,18 +114,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -145,9 +131,7 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -156,93 +140,342 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
+                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="../charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../404.html" class="dropdown-item">404 page</a>
+                        <a href="../500.html" class="dropdown-item">500 page</a>
+                        <a href="../503.html" class="dropdown-item">503 page</a>
+                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="../tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -284,50 +517,74 @@
                             <label class="form-label">Image Check</label>
                             <div class="row row-xs">
                               <div class="col-6 col-sm-4">
-                              <label class="imagecheck mb-2">
+                                <label class="form-imagecheck mb-2">
-                                <input name="imagecheck" type="checkbox" value="1" class="imagecheck-input" />
+                                  <input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
-                                <span class="imagecheck-figure">
+                                  <span class="form-imagecheck-figure">
-                                  <img src="../img/photos/77586f6ffa9fbc5e.jpg" alt="" class="imagecheck-image">
+                                    <img src="../static/photos/1b73704b282a8ec6.jpg" alt="Breakfast served with tea, bread and eggs" class="form-imagecheck-image">
                                   </span>
                                 </label>
                               </div>
                               <div class="col-6 col-sm-4">
-                              <label class="imagecheck mb-2">
+                                <label class="form-imagecheck mb-2">
-                                <input name="imagecheck" type="checkbox" value="2" class="imagecheck-input"  checked/>
+                                  <input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input"  checked/>
-                                <span class="imagecheck-figure">
+                                  <span class="form-imagecheck-figure">
-                                  <img src="../img/photos/552683cc4e5f0e11.jpg" alt="" class="imagecheck-image">
+                                    <img src="../static/photos/3d2998219313cd37.jpg" alt="Book, fairy lights" class="form-imagecheck-image">
                                   </span>
                                 </label>
                               </div>
                               <div class="col-6 col-sm-4">
-                              <label class="imagecheck mb-2">
+                                <label class="form-imagecheck mb-2">
-                                <input name="imagecheck" type="checkbox" value="3" class="imagecheck-input" />
+                                  <input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
-                                <span class="imagecheck-figure">
+                                  <span class="form-imagecheck-figure">
-                                  <img src="../img/photos/3664593f945f0d8d.jpg" alt="" class="imagecheck-image">
+                                    <img src="../static/photos/6ab3200b14549f8a.jpg" alt="Healthy Dinner" class="form-imagecheck-image">
                                   </span>
                                 </label>
                               </div>
                               <div class="col-6 col-sm-4">
-                              <label class="imagecheck mb-2">
+                                <label class="form-imagecheck mb-2">
-                                <input name="imagecheck" type="checkbox" value="4" class="imagecheck-input"  checked/>
+                                  <input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input"  checked/>
-                                <span class="imagecheck-figure">
+                                  <span class="form-imagecheck-figure">
-                                  <img src="../img/photos/529078594c496ec5.jpg" alt="" class="imagecheck-image">
+                                    <img src="../static/photos/6d35d9a2bd6c63c2.jpg" alt="Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water" class="form-imagecheck-image">
                                   </span>
                                 </label>
                               </div>
                               <div class="col-6 col-sm-4">
-                              <label class="imagecheck mb-2">
+                                <label class="form-imagecheck mb-2">
-                                <input name="imagecheck" type="checkbox" value="5" class="imagecheck-input" />
+                                  <input name="form-imagecheck" type="checkbox" value="5" class="form-imagecheck-input" />
-                                <span class="imagecheck-figure">
+                                  <span class="form-imagecheck-figure">
-                                  <img src="../img/photos/a74c41b6fb7fdf34.jpg" alt="" class="imagecheck-image">
+                                    <img src="../static/photos/8a26974ee6444acd.jpg" alt="Beautiful blonde woman on a wooden pier by the lake" class="form-imagecheck-image">
                                   </span>
                                 </label>
                               </div>
                               <div class="col-6 col-sm-4">
-                              <label class="imagecheck mb-2">
+                                <label class="form-imagecheck mb-2">
-                                <input name="imagecheck" type="checkbox" value="6" class="imagecheck-input" />
+                                  <input name="form-imagecheck" type="checkbox" value="6" class="form-imagecheck-input" />
-                                <span class="imagecheck-figure">
+                                  <span class="form-imagecheck-figure">
-                                  <img src="../img/photos/a159fb2bff29fda4.jpg" alt="" class="imagecheck-image">
+                                    <img src="../static/photos/8c13ad59f739558c.jpg" alt="Still life of mandarin oranges with leaves" class="form-imagecheck-image">
+                                  </span>
+                                </label>
+                              </div>
+                              <div class="col-6 col-sm-4">
+                                <label class="form-imagecheck mb-2">
+                                  <input name="form-imagecheck" type="checkbox" value="7" class="form-imagecheck-input"  checked/>
+                                  <span class="form-imagecheck-figure">
+                                    <img src="../static/photos/8fdeb4785d2b82ef.jpg" alt="Blonde woman having a healthy snack at the wooden pier" class="form-imagecheck-image">
+                                  </span>
+                                </label>
+                              </div>
+                              <div class="col-6 col-sm-4">
+                                <label class="form-imagecheck mb-2">
+                                  <input name="form-imagecheck" type="checkbox" value="8" class="form-imagecheck-input" />
+                                  <span class="form-imagecheck-figure">
+                                    <img src="../static/photos/9f36332564ca271d.jpg" alt="Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed" class="form-imagecheck-image">
+                                  </span>
+                                </label>
+                              </div>
+                              <div class="col-6 col-sm-4">
+                                <label class="form-imagecheck mb-2">
+                                  <input name="form-imagecheck" type="checkbox" value="9" class="form-imagecheck-input" />
+                                  <span class="form-imagecheck-figure">
+                                    <img src="../static/photos/35b88fc04a518c1b.jpg" alt="Overhead view of macarons on a marble slab" class="form-imagecheck-image">
                                   </span>
                                 </label>
                               </div>
@@ -341,50 +598,74 @@
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Image Check<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-xs"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-2"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/77586f6ffa9fbc5e.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/1b73704b282a8ec6.jpg"</span> <span class="na">alt=</span><span class="s">"Breakfast served with tea, bread and eggs"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
             <span class="nt">&lt;/span&gt;</span>
          <span class="nt">&lt;/label&gt;</span>
       <span class="nt">&lt;/div&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-2"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"2"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"2"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/552683cc4e5f0e11.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/3d2998219313cd37.jpg"</span> <span class="na">alt=</span><span class="s">"Book, fairy lights"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
             <span class="nt">&lt;/span&gt;</span>
          <span class="nt">&lt;/label&gt;</span>
       <span class="nt">&lt;/div&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-2"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"3"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"3"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/3664593f945f0d8d.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/6ab3200b14549f8a.jpg"</span> <span class="na">alt=</span><span class="s">"Healthy Dinner"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
             <span class="nt">&lt;/span&gt;</span>
          <span class="nt">&lt;/label&gt;</span>
       <span class="nt">&lt;/div&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-2"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"4"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"4"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/529078594c496ec5.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/6d35d9a2bd6c63c2.jpg"</span> <span class="na">alt=</span><span class="s">"Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
             <span class="nt">&lt;/span&gt;</span>
          <span class="nt">&lt;/label&gt;</span>
       <span class="nt">&lt;/div&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-2"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"5"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"5"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/a74c41b6fb7fdf34.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/8a26974ee6444acd.jpg"</span> <span class="na">alt=</span><span class="s">"Beautiful blonde woman on a wooden pier by the lake"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
             <span class="nt">&lt;/span&gt;</span>
          <span class="nt">&lt;/label&gt;</span>
       <span class="nt">&lt;/div&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-2"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"6"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"6"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="nt">/&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
-               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/a159fb2bff29fda4.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/8c13ad59f739558c.jpg"</span> <span class="na">alt=</span><span class="s">"Still life of mandarin oranges with leaves"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"7"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/8fdeb4785d2b82ef.jpg"</span> <span class="na">alt=</span><span class="s">"Blonde woman having a healthy snack at the wooden pier"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"8"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/9f36332564ca271d.jpg"</span> <span class="na">alt=</span><span class="s">"Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"9"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/35b88fc04a518c1b.jpg"</span> <span class="na">alt=</span><span class="s">"Overhead view of macarons on a marble slab"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
             <span class="nt">&lt;/span&gt;</span>
          <span class="nt">&lt;/label&gt;</span>
       <span class="nt">&lt;/div&gt;</span>
@@ -401,18 +682,24 @@
                         <form action="https://codepen.io/pen/define" method="post" target="_blank">
                           <input type="hidden" name="data" value='{"title":"Image input","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n
                           <div class=\"mb-3\">\n\t<label class=\"form-label\">Image Check</label>\n\t
-                          <div class=\"row row-xs\">\n\t\t\n\t\t
+                            <div class=\"row row-xs\">\n\t\t\n\n\t\t\n\t\t
-                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"imagecheck mb-2\">\n\t\t\t\t<input name=\"imagecheck\" type=\"checkbox\" value=\"1\" class=\"imagecheck-input\" />\n\t\t\t\t<span class=\"imagecheck-figure\">\n\t\t\t\t\t<img src=\"../img/photos/77586f6ffa9fbc5e.jpg\" alt=\"\" class=\"imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                              <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"1\" class=\"form-imagecheck-input\" />\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/1b73704b282a8ec6.jpg\" alt=\"Breakfast served with tea, bread and eggs\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
                               \n\t\t\n\t\t
-                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"imagecheck mb-2\">\n\t\t\t\t<input name=\"imagecheck\" type=\"checkbox\" value=\"2\" class=\"imagecheck-input\"  checked/>\n\t\t\t\t<span class=\"imagecheck-figure\">\n\t\t\t\t\t<img src=\"../img/photos/552683cc4e5f0e11.jpg\" alt=\"\" class=\"imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                              <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"2\" class=\"form-imagecheck-input\"  checked/>\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/3d2998219313cd37.jpg\" alt=\"Book, fairy lights\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
                               \n\t\t\n\t\t
-                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"imagecheck mb-2\">\n\t\t\t\t<input name=\"imagecheck\" type=\"checkbox\" value=\"3\" class=\"imagecheck-input\" />\n\t\t\t\t<span class=\"imagecheck-figure\">\n\t\t\t\t\t<img src=\"../img/photos/3664593f945f0d8d.jpg\" alt=\"\" class=\"imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                              <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"3\" class=\"form-imagecheck-input\" />\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/6ab3200b14549f8a.jpg\" alt=\"Healthy Dinner\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
                               \n\t\t\n\t\t
-                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"imagecheck mb-2\">\n\t\t\t\t<input name=\"imagecheck\" type=\"checkbox\" value=\"4\" class=\"imagecheck-input\"  checked/>\n\t\t\t\t<span class=\"imagecheck-figure\">\n\t\t\t\t\t<img src=\"../img/photos/529078594c496ec5.jpg\" alt=\"\" class=\"imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                              <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"4\" class=\"form-imagecheck-input\"  checked/>\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/6d35d9a2bd6c63c2.jpg\" alt=\"Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
                               \n\t\t\n\t\t
-                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"imagecheck mb-2\">\n\t\t\t\t<input name=\"imagecheck\" type=\"checkbox\" value=\"5\" class=\"imagecheck-input\" />\n\t\t\t\t<span class=\"imagecheck-figure\">\n\t\t\t\t\t<img src=\"../img/photos/a74c41b6fb7fdf34.jpg\" alt=\"\" class=\"imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                              <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"5\" class=\"form-imagecheck-input\" />\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/8a26974ee6444acd.jpg\" alt=\"Beautiful blonde woman on a wooden pier by the lake\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
                               \n\t\t\n\t\t
-                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"imagecheck mb-2\">\n\t\t\t\t<input name=\"imagecheck\" type=\"checkbox\" value=\"6\" class=\"imagecheck-input\" />\n\t\t\t\t<span class=\"imagecheck-figure\">\n\t\t\t\t\t<img src=\"../img/photos/a159fb2bff29fda4.jpg\" alt=\"\" class=\"imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                              <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"6\" class=\"form-imagecheck-input\" />\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/8c13ad59f739558c.jpg\" alt=\"Still life of mandarin oranges with leaves\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                              \n\t\t\n\t\t
+                              <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"7\" class=\"form-imagecheck-input\"  checked/>\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/8fdeb4785d2b82ef.jpg\" alt=\"Blonde woman having a healthy snack at the wooden pier\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                              \n\t\t\n\t\t
+                              <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"8\" class=\"form-imagecheck-input\" />\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/9f36332564ca271d.jpg\" alt=\"Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                              \n\t\t\n\t\t
+                              <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"form-imagecheck mb-2\">\n\t\t\t\t<input name=\"form-imagecheck\" type=\"checkbox\" value=\"9\" class=\"form-imagecheck-input\" />\n\t\t\t\t<span class=\"form-imagecheck-figure\">\n\t\t\t\t\t<img src=\"../static/photos/35b88fc04a518c1b.jpg\" alt=\"Overhead view of macarons on a marble slab\" class=\"form-imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
                               \n\t\t\n\t</div>
                             \n</div>
                           \n\n\n</div>
@@ -431,47 +718,11 @@
         </main>
       </div>
     </div>
-  <script>
+  </div>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
   <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
   <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
 </body>
 </html>

demo/components/progress.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -24,74 +23,63 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <title>Progress bar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/progress.png">
     <meta name="twitter:site" content="@tabler_ui">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
     <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/progress.png">
     <meta property="og:image:width" content="1280">
     <meta property="og:image:height" content="640">
     <meta property="og:site_name" content="Tabler">
     <meta property="og:type" content="object">
     <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/progress.html">
     <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -115,7 +103,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -126,18 +114,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -145,9 +131,7 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -156,93 +140,342 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
+                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="../charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../404.html" class="dropdown-item">404 page</a>
+                        <a href="../500.html" class="dropdown-item">500 page</a>
+                        <a href="../503.html" class="dropdown-item">503 page</a>
+                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="../tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -281,9 +514,9 @@
                       <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
                         <div class="flex-fill" style="max-width: 274px">
                           <div>
-                          <div class="d-flex mb-1 align-items-center leading-none">
+                            <div class="d-flex mb-1 align-items-center lh-1">
                               <div class="text-h5 font-weight-bolder m-0">Label</div>
-                            <span class="ml-auto text-h6">45%</span>
+                              <span class="ml-auto text-h6 strong">45%</span>
                             </div>
                             <div class="progress progress-sm">
                               <div class="progress-bar bg-blue" style="width: 45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
@@ -292,9 +525,9 @@
                             </div>
                           </div>
                           <div>
-                          <div class="d-flex mb-1 align-items-center leading-none">
+                            <div class="d-flex mb-1 align-items-center lh-1">
                               <div class="text-h5 font-weight-bolder m-0">Label</div>
-                            <span class="ml-auto text-h6">32%</span>
+                              <span class="ml-auto text-h6 strong">32%</span>
                             </div>
                             <div class="progress progress-sm">
                               <div class="progress-bar bg-red" style="width: 32%" role="progressbar" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100">
@@ -303,9 +536,9 @@
                             </div>
                           </div>
                           <div>
-                          <div class="d-flex mb-1 align-items-center leading-none">
+                            <div class="d-flex mb-1 align-items-center lh-1">
                               <div class="text-h5 font-weight-bolder m-0">Label</div>
-                            <span class="ml-auto text-h6">90%</span>
+                              <span class="ml-auto text-h6 strong">90%</span>
                             </div>
                             <div class="progress progress-sm">
                               <div class="progress-bar bg-yellow" style="width: 90%" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
@@ -314,9 +547,9 @@
                             </div>
                           </div>
                           <div>
-                          <div class="d-flex mb-1 align-items-center leading-none">
+                            <div class="d-flex mb-1 align-items-center lh-1">
                               <div class="text-h5 font-weight-bolder m-0">Label</div>
-                            <span class="ml-auto text-h6">51%</span>
+                              <span class="ml-auto text-h6 strong">51%</span>
                             </div>
                             <div class="progress progress-sm">
                               <div class="progress-bar bg-green" style="width: 51%" role="progressbar" aria-valuenow="51" aria-valuemin="0" aria-valuemax="100">
@@ -329,9 +562,9 @@
                     </div>
                     <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
                       <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center leading-none"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center lh-1"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-h5 font-weight-bolder m-0"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6"</span><span class="nt">&gt;</span>45%<span class="nt">&lt;/span&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6 strong"</span><span class="nt">&gt;</span>45%<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-blue"</span> <span class="na">style=</span><span class="s">"width: 45%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"45"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
@@ -340,9 +573,9 @@
    <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center leading-none"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center lh-1"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-h5 font-weight-bolder m-0"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6"</span><span class="nt">&gt;</span>32%<span class="nt">&lt;/span&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6 strong"</span><span class="nt">&gt;</span>32%<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-red"</span> <span class="na">style=</span><span class="s">"width: 32%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"32"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
@@ -351,9 +584,9 @@
    <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center leading-none"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center lh-1"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-h5 font-weight-bolder m-0"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6"</span><span class="nt">&gt;</span>90%<span class="nt">&lt;/span&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6 strong"</span><span class="nt">&gt;</span>90%<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-yellow"</span> <span class="na">style=</span><span class="s">"width: 90%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"90"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
@@ -362,9 +595,9 @@
    <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;div&gt;</span>
-   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center leading-none"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center lh-1"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-h5 font-weight-bolder m-0"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6"</span><span class="nt">&gt;</span>51%<span class="nt">&lt;/span&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6 strong"</span><span class="nt">&gt;</span>51%<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-green"</span> <span class="na">style=</span><span class="s">"width: 51%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"51"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
@@ -383,9 +616,9 @@
                         <form action="https://codepen.io/pen/define" method="post" target="_blank">
                           <input type="hidden" name="data" value='{"title":"Progress bar","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n\n\n
                           <div>\n   
-                          <div class=\"d-flex mb-1 align-items-center leading-none\">\n      
+                            <div class=\"d-flex mb-1 align-items-center lh-1\">\n      
                               <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
-                            \n      \n      <span class=\"ml-auto text-h6\">45%</span>\n   </div>
+                              \n      \n      <span class=\"ml-auto text-h6 strong\">45%</span>\n   </div>
                             \n   \n\n
                             <div class=\"progress progress-sm\">\n   \n      
                               <div class=\"progress-bar bg-blue\" style=\"width: 45%\" role=\"progressbar\" aria-valuenow=\"45\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">45% Complete</span>\n         \n      </div>
@@ -393,9 +626,9 @@
                             \n\n</div>
                           \n\n\n\n\n
                           <div>\n   
-                          <div class=\"d-flex mb-1 align-items-center leading-none\">\n      
+                            <div class=\"d-flex mb-1 align-items-center lh-1\">\n      
                               <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
-                            \n      \n      <span class=\"ml-auto text-h6\">32%</span>\n   </div>
+                              \n      \n      <span class=\"ml-auto text-h6 strong\">32%</span>\n   </div>
                             \n   \n\n
                             <div class=\"progress progress-sm\">\n   \n      
                               <div class=\"progress-bar bg-red\" style=\"width: 32%\" role=\"progressbar\" aria-valuenow=\"32\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">32% Complete</span>\n         \n      </div>
@@ -403,9 +636,9 @@
                             \n\n</div>
                           \n\n\n\n\n
                           <div>\n   
-                          <div class=\"d-flex mb-1 align-items-center leading-none\">\n      
+                            <div class=\"d-flex mb-1 align-items-center lh-1\">\n      
                               <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
-                            \n      \n      <span class=\"ml-auto text-h6\">90%</span>\n   </div>
+                              \n      \n      <span class=\"ml-auto text-h6 strong\">90%</span>\n   </div>
                             \n   \n\n
                             <div class=\"progress progress-sm\">\n   \n      
                               <div class=\"progress-bar bg-yellow\" style=\"width: 90%\" role=\"progressbar\" aria-valuenow=\"90\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">90% Complete</span>\n         \n      </div>
@@ -413,9 +646,9 @@
                             \n\n</div>
                           \n\n\n\n\n
                           <div>\n   
-                          <div class=\"d-flex mb-1 align-items-center leading-none\">\n      
+                            <div class=\"d-flex mb-1 align-items-center lh-1\">\n      
                               <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
-                            \n      \n      <span class=\"ml-auto text-h6\">51%</span>\n   </div>
+                              \n      \n      <span class=\"ml-auto text-h6 strong\">51%</span>\n   </div>
                             \n   \n\n
                             <div class=\"progress progress-sm\">\n   \n      
                               <div class=\"progress-bar bg-green\" style=\"width: 51%\" role=\"progressbar\" aria-valuenow=\"51\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">51% Complete</span>\n         \n      </div>
@@ -437,47 +670,11 @@
         </main>
       </div>
     </div>
-  <script>
+  </div>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
   <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
   <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
 </body>
 </html>

demo/components/simple-avatar.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -24,74 +23,63 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <title>Simple avatar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/simple-avatar.png">
     <meta name="twitter:site" content="@tabler_ui">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
     <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/simple-avatar.png">
     <meta property="og:image:width" content="1280">
     <meta property="og:image:height" content="640">
     <meta property="og:site_name" content="Tabler">
     <meta property="og:type" content="object">
     <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/simple-avatar.html">
     <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -115,7 +103,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -126,18 +114,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -145,9 +131,7 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -156,93 +140,342 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
+                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="../charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../404.html" class="dropdown-item">404 page</a>
+                        <a href="../500.html" class="dropdown-item">500 page</a>
+                        <a href="../503.html" class="dropdown-item">503 page</a>
+                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="../tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -280,14 +513,14 @@
                     <div class="border border-bottom-0 bg-light p-1 rounded-top">
                       <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
                         <div >
-                        <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)">
+                          <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)">
                             <span class="badge bg-green"></span>
                           </span>
                         </div>
                       </div>
                     </div>
                     <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
-                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/000m.jpg)"</span><span class="nt">&gt;</span>
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./static/avatars/000m.jpg)"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
 <span class="nt">&lt;/span&gt;</span></code></pre>
                     </div>
@@ -299,7 +532,7 @@
                       </div>
                       <div class="col">
                         <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                        <input type="hidden" name="data" value='{"title":"Simple avatar","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  <span class=\"avatar\" style=\"background-image: url(../img/avatars/000m.jpg)\">\n  <span class=\"badge bg-green\"></span>\n</span>\n\n\n</div>
+                          <input type="hidden" name="data" value='{"title":"Simple avatar","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  <span class=\"avatar\" style=\"background-image: url(../static/avatars/000m.jpg)\">\n  <span class=\"badge bg-green\"></span>\n</span>\n\n\n</div>
                         \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
                         <button type="submit" class="btn btn-primary mt-4 btn-block">
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
@@ -315,47 +548,11 @@
         </main>
       </div>
     </div>
-  <script>
+  </div>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
   <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
   <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
 </body>
 </html>

demo/components/simple-card.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -24,74 +23,63 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <title>Simple box - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/simple-card.png">
     <meta name="twitter:site" content="@tabler_ui">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
     <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/simple-card.png">
     <meta property="og:image:width" content="1280">
     <meta property="og:image:height" content="640">
     <meta property="og:site_name" content="Tabler">
     <meta property="og:type" content="object">
     <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/simple-card.html">
     <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -115,7 +103,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -126,18 +114,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -145,9 +131,7 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -156,93 +140,342 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
+                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="../charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../404.html" class="dropdown-item">404 page</a>
+                        <a href="../500.html" class="dropdown-item">500 page</a>
+                        <a href="../503.html" class="dropdown-item">503 page</a>
+                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="../tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -327,47 +560,11 @@
         </main>
       </div>
     </div>
-  <script>
+  </div>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
   <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
   <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
 </body>
 </html>

demo/components/widget-revenue.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -24,74 +23,63 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <title>Revenue chart - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/widget-revenue.png">
     <meta name="twitter:site" content="@tabler_ui">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
     <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/widget-revenue.png">
     <meta property="og:image:width" content="1280">
     <meta property="og:image:height" content="640">
     <meta property="og:site_name" content="Tabler">
     <meta property="og:type" content="object">
     <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/widget-revenue.html">
     <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -115,7 +103,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -126,18 +114,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -145,9 +131,7 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -156,93 +140,342 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
+                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="../charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../404.html" class="dropdown-item">404 page</a>
+                        <a href="../500.html" class="dropdown-item">500 page</a>
+                        <a href="../503.html" class="dropdown-item">503 page</a>
+                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="../tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -282,8 +515,8 @@
                         <div >
                           <div class="card">
                             <div class="card-body">
-                            <div class="d-flex">
+                              <div class="d-flex align-items-center">
-                              <div>Revenue</div>
+                                <div class="subheader">Revenue</div>
                                 <div class="ml-auto">
                                   <div class="dropdown">
                                     <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -300,7 +533,7 @@
                               <div class="d-flex align-items-baseline">
                                 <div class="h1 mb-0 mr-2">$4,300</div>
                                 <div class="mr-auto">
-                                <span class="text-green d-inline-flex align-items-center leading-none">
+                                  <span class="text-green d-inline-flex align-items-center lh-1">
                                     8% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
                                   </span>
                                 </div>
@@ -314,8 +547,8 @@
                     <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
                       <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div&gt;</span>Revenue<span class="nt">&lt;/div&gt;</span>
+         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"subheader"</span><span class="nt">&gt;</span>Revenue<span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto"</span><span class="nt">&gt;</span>
             <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-toggle text-muted"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">id=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
@@ -332,7 +565,7 @@
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-baseline"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"h1 mb-0 mr-2"</span><span class="nt">&gt;</span>$4,300<span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-auto"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-green d-inline-flex align-items-center leading-none"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-green d-inline-flex align-items-center lh-1"</span><span class="nt">&gt;</span>
                8% <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon ml-1"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"23 6 13.5 15.5 8.5 10.5 1 18"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"17 6 23 6 23 12"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
             <span class="nt">&lt;/span&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
@@ -352,8 +585,8 @@
                           <input type="hidden" name="data" value='{"title":"Revenue chart","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
                           <div class=\"card\">\n   
                             <div class=\"card-body\">\n      
-                            <div class=\"d-flex\">\n         
+                              <div class=\"d-flex align-items-center\">\n         
-                              <div>Revenue</div>
+                                <div class=\"subheader\">Revenue</div>
                                 \n         
                                 <div class=\"ml-auto\">\n            
                                   <div class=\"dropdown\">\n   <a class=\"dropdown-toggle text-muted\" href=\"#\" id=\"dropdownMenuButton\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n      Last 7 days\n   </a>\n   
@@ -365,12 +598,12 @@
                               <div class=\"d-flex align-items-baseline\">\n         
                                 <div class=\"h1 mb-0 mr-2\">$4,300</div>
                                 \n         
-                              <div class=\"mr-auto\">\n            \n\n\n<span class=\"text-green d-inline-flex align-items-center leading-none\">\n   8% <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon ml-1\"><polyline points=\"23 6 13.5 15.5 8.5 10.5 1 18\"></polyline><polyline points=\"17 6 23 6 23 12\"></polyline></svg>\n\n</span>\n\n         </div>
+                                <div class=\"mr-auto\">\n            \n\n\n<span class=\"text-green d-inline-flex align-items-center lh-1\">\n   8% <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon ml-1\"><polyline points=\"23 6 13.5 15.5 8.5 10.5 1 18\"></polyline><polyline points=\"17 6 23 6 23 12\"></polyline></svg>\n\n</span>\n\n         </div>
                                 \n      </div>
                               \n   </div>
-                          \n   \n\n\n\n\n\n\n\n
+                            \n   \n\n\n\n\n\n\n\n\n\n
                             <div id=\"chart-revenue-bg\"  class=\"chart-sm\" ></div>
-                          \n\n\n\n\n   \n\n\n\n\n</div>
+                            \n\n\n\n\n\n\n\n\n\n\n</div>
                           \n\n\n</div>
                         \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
                         <button type="submit" class="btn btn-primary mt-4 btn-block">
@@ -387,47 +620,11 @@
         </main>
       </div>
     </div>
-  <script>
+  </div>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
   <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
   <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
 </body>
 </html>

demo/components/widget-sales.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -24,74 +23,63 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <title>Sales widget - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/widget-sales.png">
     <meta name="twitter:site" content="@tabler_ui">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
     <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/widget-sales.png">
     <meta property="og:image:width" content="1280">
     <meta property="og:image:height" content="640">
     <meta property="og:site_name" content="Tabler">
     <meta property="og:type" content="object">
     <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/widget-sales.html">
     <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="../dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="../dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="../dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href=".." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href=".." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -115,7 +103,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -126,18 +114,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -145,9 +131,7 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -156,93 +140,342 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="../buttons.html" >
+                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="../cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="../c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="../charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../404.html" class="dropdown-item">404 page</a>
+                        <a href="../500.html" class="dropdown-item">500 page</a>
+                        <a href="../503.html" class="dropdown-item">503 page</a>
+                        <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="../tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="../gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="../docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -282,8 +515,8 @@
                         <div class="flex-fill" style="max-width: 274px">
                           <div class="card">
                             <div class="card-body">
-                            <div class="d-flex">
+                              <div class="d-flex align-items-center">
-                              <div>Sales</div>
+                                <div class="subheader">Sales</div>
                                 <div class="ml-auto">
                                   <div class="dropdown">
                                     <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -301,7 +534,7 @@
                               <div class="d-flex mb-2">
                                 <div>Conversion rate</div>
                                 <div class="ml-auto">
-                                <span class="text-green d-inline-flex align-items-center leading-none">
+                                  <span class="text-green d-inline-flex align-items-center lh-1">
                                     7% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
                                   </span>
                                 </div>
@@ -319,8 +552,8 @@
                     <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
                       <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center"</span><span class="nt">&gt;</span>
-         <span class="nt">&lt;div&gt;</span>Sales<span class="nt">&lt;/div&gt;</span>
+         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"subheader"</span><span class="nt">&gt;</span>Sales<span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto"</span><span class="nt">&gt;</span>
             <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-toggle text-muted"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">id=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
@@ -338,7 +571,7 @@
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-2"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;div&gt;</span>Conversion rate<span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-green d-inline-flex align-items-center leading-none"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-green d-inline-flex align-items-center lh-1"</span><span class="nt">&gt;</span>
                7% <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon ml-1"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"23 6 13.5 15.5 8.5 10.5 1 18"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"17 6 23 6 23 12"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
             <span class="nt">&lt;/span&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
@@ -362,8 +595,8 @@
                           <input type="hidden" name="data" value='{"title":"Sales widget","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
                           <div class=\"card\">\n   
                             <div class=\"card-body\">\n      
-                            <div class=\"d-flex\">\n         
+                              <div class=\"d-flex align-items-center\">\n         
-                              <div>Sales</div>
+                                <div class=\"subheader\">Sales</div>
                                 \n         
                                 <div class=\"ml-auto\">\n            
                                   <div class=\"dropdown\">\n   <a class=\"dropdown-toggle text-muted\" href=\"#\" id=\"dropdownMenuButton\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n      Last 7 days\n   </a>\n   
@@ -377,7 +610,7 @@
                               <div class=\"d-flex mb-2\">\n         
                                 <div>Conversion rate</div>
                                 \n         
-                              <div class=\"ml-auto\">\n\n\n<span class=\"text-green d-inline-flex align-items-center leading-none\">\n   7% <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon ml-1\"><polyline points=\"23 6 13.5 15.5 8.5 10.5 1 18\"></polyline><polyline points=\"17 6 23 6 23 12\"></polyline></svg>\n\n</span>\n</div>
+                                <div class=\"ml-auto\">\n\n\n<span class=\"text-green d-inline-flex align-items-center lh-1\">\n   7% <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon ml-1\"><polyline points=\"23 6 13.5 15.5 8.5 10.5 1 18\"></polyline><polyline points=\"17 6 23 6 23 12\"></polyline></svg>\n\n</span>\n</div>
                                 \n      </div>
                               \n      \n\n
                               <div class=\"progress progress-sm\">\n   \n      
@@ -401,47 +634,11 @@
         </main>
       </div>
     </div>
-  <script>
+  </div>
-    window.tabler_colors = {
-    'blue': '#206bc4',
-    'azure': '#45aaf2',
-    'indigo': '#6574cd',
-    'purple': '#a55eea',
-    'pink': '#f66d9b',
-    'red': '#fa4654',
-    'orange': '#fd9644',
-    'yellow': '#f1c40f',
-    'lime': '#7bd235',
-    'green': '#5eba00',
-    'teal': '#2bcbba',
-    'cyan': '#17a2b8',
-    'gray': '#868e96',
-    };
-  </script>
   <!-- Libs JS -->
-  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
   <!-- Tabler Core -->
-  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <script src="../dist/js/tabler.min.js?1580339009"></script>
-  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-range-sliders.min.js?1580339009"></script>
-  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-  <script>
-    document.body.style.display = 'block';
-  </script>
 </body>
 </html>

demo/crypto-currencies.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0-alpha
+* @version v1.0.0-alpha
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,60 +24,49 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Crypto currencies - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
-    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
-    <style>
+    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
-      body { display: none; }
+    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
-    </style>
+    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="layout">
+    <div class="page">
-      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
             <div class="container">
-          <a class="layout-toggler" data-toggle="menubar">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-            <span class="layout-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
-          <a href="." class="navbar-brand text-reset mr-md-3">
+              <ul class="nav navbar-menu align-items-center ml-auto">
-            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
-            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
-          </a>
-          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-            <li class="nav-item dropdown mr-3">
-              <a class="nav-link text-reset px-2" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                <span class="badge badge-pill badge-up bg-primary">4</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-                <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-                </div>
-                <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                    <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-                </div>
-              </div>
-            </li>
                 <li class="nav-item d-none d-lg-flex mr-3">
-              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
                 </li>
                 <li class="nav-item dropdown">
-              <a href="#" data-toggle="dropdown"
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
-                <span class="ml-2 d-none d-lg-block leading-none">
+                      Leesa Beaty
-                  Paweł Kuna
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
                   </a>
@@ -102,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -113,18 +101,16 @@
                 </li>
               </ul>
             </div>
-      </header>
+          </div>
-      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-          <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                     </span>
-                <span class="nav-text">
                     Dashboard
-                </span>
                   </a>
                 </li>
                 <li class="nav-item">
@@ -132,9 +118,7 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                     </span>
-                <span class="nav-text">
                     Form elements
-                </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -143,93 +127,342 @@
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
-                <span class="nav-text">
                     Base
-                </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
                       <div class="dropdown-menu">
-                <a class="dropdown-item" href="./buttons.html" >
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                  <span class="nav-text">
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                    Buttons
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                  </span>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                </a>
-                <a class="dropdown-item" href="./cards.html" >
-                  <span class="nav-text">
-                    Cards
-                  </span>
-                </a>
-                <a class="dropdown-item" href="./c.html" >
-                  <span class="nav-text">
-                    C
-                  </span>
-                </a>
                       </div>
                     </li>
-            <li class="nav-item">
+                    <li class="dropright">
-              <a class="nav-link" href="./charts.html" >
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                <span class="nav-icon">
+                        Error pages
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                </span>
-                <span class="nav-text">
-                  Charts
-                </span>
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="./calendar.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Calendar
-                </span>
-              </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="./users.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </span>
-                <span class="nav-text">
-                  Users
                     </span>
+                    A
                   </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./tmp.html" class="dropdown-item">C</a>
+                      </div>
                     </li>
-            <li class="nav-item">
+                  </ul>
-              <a class="nav-link" href="./gallery.html" >
-                <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                </span>
-                <span class="nav-text">
-                  Gallery
-                </span>
-              </a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="./layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
-                <span class="nav-text">
                     Layouts
-                </span>
                   </a>
                 </li>
-            <li class="nav-item">
+                <li class="nav-item dropdown">
-              <a class="nav-link" href="./docs/index.html" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
                     <span class="nav-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-                </span>
-                <span class="nav-text">
-                  Documentation
                     </span>
+                    Extra
+                  </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>
                   </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
               </div>
             </div>
-      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+          </div>
-      <div class="layout-area-main">
+        </header>
+        <div class="content-page">
           <main class="container my-4 flex-fill">
             <!-- Page title -->
             <div class="page-title-box">
@@ -1460,47 +1693,11 @@
           </main>
         </div>
       </div>
-    <script>
+    </div>
-      window.tabler_colors = {
-      'blue': '#206bc4',
-      'azure': '#45aaf2',
-      'indigo': '#6574cd',
-      'purple': '#a55eea',
-      'pink': '#f66d9b',
-      'red': '#fa4654',
-      'orange': '#fd9644',
-      'yellow': '#f1c40f',
-      'lime': '#7bd235',
-      'green': '#5eba00',
-      'teal': '#2bcbba',
-      'cyan': '#17a2b8',
-      'gray': '#868e96',
-      };
-    </script>
     <!-- Libs JS -->
-    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
-    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
-    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
-    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
-    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
-    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
     <!-- Tabler Core -->
-    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <script src="./dist/js/tabler.min.js?1580339009"></script>
-    <!-- Tabler Plugins -->
+    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
-    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
   </body>
 </html>

demo/datatables.html

@@ -0,0 +1,835 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version v1.0.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Data Tables - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580339009" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1580339009" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580339009" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580339009" rel="stylesheet"/>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+              </a>
+              <ul class="nav navbar-menu align-items-center ml-auto">
+                <li class="nav-item d-none d-lg-flex mr-3">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
+                      Leesa Beaty
+                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                    </span>
+                  </a>
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                      Profile
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                      Settings
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                      Inbox
+                      <span class="badge bg-primary ml-auto">6</span>
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                      Message
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+                      Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                      Sign out
+                    </a>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
+            <div class="container">
+              <ul class="navbar-nav flex-wrap flex-fill">
+                <li class="nav-item">
+                  <a class="nav-link" href="./index.html" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                    </span>
+                    Dashboard
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                    </span>
+                    Form elements
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                    </span>
+                    Base
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+                    </span>
+                    A
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./tmp.html" class="dropdown-item">C</a>
+                      </div>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./layouts.html" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                    </span>
+                    Layouts
+                  </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                    </span>
+                    Extra
+                  </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>
+                  </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-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/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/layout.html" >
+                        Layout
+                      </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
+                        <span class="badge bg-green ml-auto">New</span>
+                      </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="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </header>
+        <div class="content-page">
+          <main class="container my-4 flex-fill">
+            <div class="card">
+              <div class="card-header">
+                <h3 class="card-title">Invoices</h3>
+              </div>
+              <div class="card-body border-bottom py-3">
+                <div class="d-flex">
+                  <div class="mb-0">
+                    Show
+                    <div class="mx-2 d-inline-block">
+                      <input type="text" class="form-control form-control-sm" value="8" size="3">
+                    </div>
+                    entries
+                  </div>
+                  <div class="mb-0 ml-auto">
+                    Search:
+                    <div class="ml-2 d-inline-block">
+                      <input type="text" class="form-control form-control-sm">
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="table-responsive">
+                <table class="table card-table table-vcenter text-nowrap datatable">
+                  <thead>
+                    <tr>
+                      <th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
+                      <th class="w-1p">No. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm text-dark icon-thick"><polyline points="18 15 12 9 6 15"></polyline></svg>
+                      </th>
+                      <th>Invoice Subject <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+                      </th>
+                      <th>Client <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+                      </th>
+                      <th>VAT No. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+                      </th>
+                      <th>Created <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+                      </th>
+                      <th>Status <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+                      </th>
+                      <th>Price <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+                      </th>
+                      <th></th>
+                      <th></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
+                      <td><span class="text-muted">001401</span></td>
+                      <td><a href="invoice.html" class="text-reset" tabindex="-1">Design Works</a></td>
+                      <td>
+                        <span class="flag flag-country-us"></span>
+                        Carlson Limited
+                      </td>
+                      <td>
+                        87956621
+                      </td>
+                      <td>
+                        15 Dec 2017
+                      </td>
+                      <td>
+                        <span class="status-icon bg-success"></span> Paid
+                      </td>
+                      <td>$887</td>
+                      <td class="text-right">
+                        <button class="btn btn-secondary btn-sm align-text-top">Manage</button>
+                        <span class="dropdown ml-1">
+                          <button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
+                          <div class="dropdown-menu">
+                            <a class="dropdown-item" href="#">
+                              Action
+                            </a>
+                            <a class="dropdown-item" href="#">
+                              Another action
+                            </a>
+                          </div>
+                        </span>
+                      </td>
+                      <td>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm float-right"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
+                      <td><span class="text-muted">001402</span></td>
+                      <td><a href="invoice.html" class="text-reset" tabindex="-1">UX Wireframes</a></td>
+                      <td>
+                        <span class="flag flag-country-gb"></span>
+                        Adobe
+                      </td>
+                      <td>
+                        87956421
+                      </td>
+                      <td>
+                        12 Apr 2017
+                      </td>
+                      <td>
+                        <span class="status-icon bg-warning"></span> Pending
+                      </td>
+                      <td>$1200</td>
+                      <td class="text-right">
+                        <button class="btn btn-secondary btn-sm align-text-top">Manage</button>
+                        <span class="dropdown ml-1">
+                          <button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
+                          <div class="dropdown-menu">
+                            <a class="dropdown-item" href="#">
+                              Action
+                            </a>
+                            <a class="dropdown-item" href="#">
+                              Another action
+                            </a>
+                          </div>
+                        </span>
+                      </td>
+                      <td>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm float-right"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
+                      <td><span class="text-muted">001403</span></td>
+                      <td><a href="invoice.html" class="text-reset" tabindex="-1">New Dashboard</a></td>
+                      <td>
+                        <span class="flag flag-country-de"></span>
+                        Bluewolf
+                      </td>
+                      <td>
+                        87952621
+                      </td>
+                      <td>
+                        23 Oct 2017
+                      </td>
+                      <td>
+                        <span class="status-icon bg-warning"></span> Pending
+                      </td>
+                      <td>$534</td>
+                      <td class="text-right">
+                        <button class="btn btn-secondary btn-sm align-text-top">Manage</button>
+                        <span class="dropdown ml-1">
+                          <button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
+                          <div class="dropdown-menu">
+                            <a class="dropdown-item" href="#">
+                              Action
+                            </a>
+                            <a class="dropdown-item" href="#">
+                              Another action
+                            </a>
+                          </div>
+                        </span>
+                      </td>
+                      <td>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm float-right"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
+                      <td><span class="text-muted">001404</span></td>
+                      <td><a href="invoice.html" class="text-reset" tabindex="-1">Landing Page</a></td>
+                      <td>
+                        <span class="flag flag-country-br"></span>
+                        Salesforce
+                      </td>
+                      <td>
+                        87953421
+                      </td>
+                      <td>
+                        2 Sep 2017
+                      </td>
+                      <td>
+                        <span class="status-icon bg-secondary"></span> Due in 2 Weeks
+                      </td>
+                      <td>$1500</td>
+                      <td class="text-right">
+                        <button class="btn btn-secondary btn-sm align-text-top">Manage</button>
+                        <span class="dropdown ml-1">
+                          <button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
+                          <div class="dropdown-menu">
+                            <a class="dropdown-item" href="#">
+                              Action
+                            </a>
+                            <a class="dropdown-item" href="#">
+                              Another action
+                            </a>
+                          </div>
+                        </span>
+                      </td>
+                      <td>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm float-right"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
+                      <td><span class="text-muted">001405</span></td>
+                      <td><a href="invoice.html" class="text-reset" tabindex="-1">Marketing Templates</a></td>
+                      <td>
+                        <span class="flag flag-country-pl"></span>
+                        Printic
+                      </td>
+                      <td>
+                        87956621
+                      </td>
+                      <td>
+                        29 Jan 2018
+                      </td>
+                      <td>
+                        <span class="status-icon bg-danger"></span> Paid Today
+                      </td>
+                      <td>$648</td>
+                      <td class="text-right">
+                        <button class="btn btn-secondary btn-sm align-text-top">Manage</button>
+                        <span class="dropdown ml-1">
+                          <button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
+                          <div class="dropdown-menu">
+                            <a class="dropdown-item" href="#">
+                              Action
+                            </a>
+                            <a class="dropdown-item" href="#">
+                              Another action
+                            </a>
+                          </div>
+                        </span>
+                      </td>
+                      <td>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm float-right"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
+                      <td><span class="text-muted">001406</span></td>
+                      <td><a href="invoice.html" class="text-reset" tabindex="-1">Sales Presentation</a></td>
+                      <td>
+                        <span class="flag flag-country-br"></span>
+                        Tabdaq
+                      </td>
+                      <td>
+                        87956621
+                      </td>
+                      <td>
+                        4 Feb 2018
+                      </td>
+                      <td>
+                        <span class="status-icon bg-secondary"></span> Due in 3 Weeks
+                      </td>
+                      <td>$300</td>
+                      <td class="text-right">
+                        <button class="btn btn-secondary btn-sm align-text-top">Manage</button>
+                        <span class="dropdown ml-1">
+                          <button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
+                          <div class="dropdown-menu">
+                            <a class="dropdown-item" href="#">
+                              Action
+                            </a>
+                            <a class="dropdown-item" href="#">
+                              Another action
+                            </a>
+                          </div>
+                        </span>
+                      </td>
+                      <td>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm float-right"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
+                      <td><span class="text-muted">001407</span></td>
+                      <td><a href="invoice.html" class="text-reset" tabindex="-1">Logo & Print</a></td>
+                      <td>
+                        <span class="flag flag-country-us"></span>
+                        Apple
+                      </td>
+                      <td>
+                        87956621
+                      </td>
+                      <td>
+                        22 Mar 2018
+                      </td>
+                      <td>
+                        <span class="status-icon bg-success"></span> Paid Today
+                      </td>
+                      <td>$2500</td>
+                      <td class="text-right">
+                        <button class="btn btn-secondary btn-sm align-text-top">Manage</button>
+                        <span class="dropdown ml-1">
+                          <button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
+                          <div class="dropdown-menu">
+                            <a class="dropdown-item" href="#">
+                              Action
+                            </a>
+                            <a class="dropdown-item" href="#">
+                              Another action
+                            </a>
+                          </div>
+                        </span>
+                      </td>
+                      <td>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm float-right"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
+                      <td><span class="text-muted">001408</span></td>
+                      <td><a href="invoice.html" class="text-reset" tabindex="-1">Icons</a></td>
+                      <td>
+                        <span class="flag flag-country-pl"></span>
+                        Tookapic
+                      </td>
+                      <td>
+                        87956621
+                      </td>
+                      <td>
+                        13 May 2018
+                      </td>
+                      <td>
+                        <span class="status-icon bg-success"></span> Paid Today
+                      </td>
+                      <td>$940</td>
+                      <td class="text-right">
+                        <button class="btn btn-secondary btn-sm align-text-top">Manage</button>
+                        <span class="dropdown ml-1">
+                          <button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
+                          <div class="dropdown-menu">
+                            <a class="dropdown-item" href="#">
+                              Action
+                            </a>
+                            <a class="dropdown-item" href="#">
+                              Another action
+                            </a>
+                          </div>
+                        </span>
+                      </td>
+                      <td>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm float-right"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <div class="card-footer d-flex align-items-center border-top-0">
+                <p class="m-0 text-muted">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
+                <ul class="pagination m-0 ml-auto">
+                  <li class="page-item disabled">
+                    <a class="page-link" href="#" tabindex="-1">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="15 18 9 12 15 6"></polyline></svg>
+                      Prev
+                    </a>
+                  </li>
+                  <li class="page-item"><a class="page-link" href="#">1</a></li>
+                  <li class="page-item active"><a class="page-link" href="#">2</a></li>
+                  <li class="page-item"><a class="page-link" href="#">3</a></li>
+                  <li class="page-item"><a class="page-link" href="#">4</a></li>
+                  <li class="page-item"><a class="page-link" href="#">5</a></li>
+                  <li class="page-item">
+                    <a class="page-link" href="#">
+                      Next <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580339009"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1580339009"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580339009"></script>
+  </body>
+</html>

demo/dist/css/tabler-charts.css

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

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

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

demo/dist/css/tabler-dark.css

@@ -0,0 +1,66 @@
+@media not print {
+  .theme-dark,
+  .theme-dark .modal-content,
+  .theme-dark .dropdown-menu,
+  .theme-dark .example-bg {
+    color: #afbdd1;
+    background: #222935; }
+  .theme-dark .card,
+  .theme-dark .sidebar,
+  .theme-dark .topbar {
+    color: inherit;
+    background: #303645; }
+  .theme-dark .text-body {
+    color: #afbdd1 !important; }
+  .theme-dark .avatar-list-stacked .avatar {
+    box-shadow: 0 0 0 2px #222226; }
+  .theme-dark .navbar-brand-logo {
+    -webkit-filter: brightness(0) invert(1);
+    filter: brightness(0) invert(1); }
+  .theme-dark .form-fieldset {
+    border-color: transparent; }
+  .theme-dark .form-control,
+  .theme-dark .form-select,
+  .theme-dark .form-check-input:not(:checked) {
+    background: transparent;
+    border-color: rgba(175, 189, 209, 0.4);
+    color: inherit; }
+  .theme-dark .input-group-text {
+    border-color: rgba(175, 189, 209, 0.4); }
+  .theme-dark .brand-logo {
+    -webkit-filter: brightness(0) invert(1);
+    filter: brightness(0) invert(1); } }
+
+@media not print and (prefers-color-scheme: dark) {
+  .auto-theme-dark,
+  .auto-theme-dark .modal-content,
+  .auto-theme-dark .dropdown-menu,
+  .auto-theme-dark .example-bg {
+    color: #afbdd1;
+    background: #222935; }
+  .auto-theme-dark .card,
+  .auto-theme-dark .sidebar,
+  .auto-theme-dark .topbar {
+    color: inherit;
+    background: #303645; }
+  .auto-theme-dark .text-body {
+    color: #afbdd1 !important; }
+  .auto-theme-dark .avatar-list-stacked .avatar {
+    box-shadow: 0 0 0 2px #222226; }
+  .auto-theme-dark .navbar-brand-logo {
+    -webkit-filter: brightness(0) invert(1);
+    filter: brightness(0) invert(1); }
+  .auto-theme-dark .form-fieldset {
+    border-color: transparent; }
+  .auto-theme-dark .form-control,
+  .auto-theme-dark .form-select,
+  .auto-theme-dark .form-check-input:not(:checked) {
+    background: transparent;
+    border-color: rgba(175, 189, 209, 0.4);
+    color: inherit; }
+  .auto-theme-dark .input-group-text {
+    border-color: rgba(175, 189, 209, 0.4); }
+  .auto-theme-dark .brand-logo {
+    -webkit-filter: brightness(0) invert(1);
+    filter: brightness(0) invert(1); } }
+/*# sourceMappingURL=tabler-dark.css.map */

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

@@ -0,0 +1,2 @@
+@media not print{.theme-dark,.theme-dark .dropdown-menu,.theme-dark .example-bg,.theme-dark .modal-content{color:#afbdd1;background:#222935}.theme-dark .card,.theme-dark .sidebar,.theme-dark .topbar{color:inherit;background:#303645}.theme-dark .text-body{color:#afbdd1!important}.theme-dark .avatar-list-stacked .avatar{box-shadow:0 0 0 2px #222226}.theme-dark .navbar-brand-logo{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}.theme-dark .form-fieldset{border-color:transparent}.theme-dark .form-check-input:not(:checked),.theme-dark .form-control,.theme-dark .form-select{background:0 0;border-color:rgba(175,189,209,.4);color:inherit}.theme-dark .input-group-text{border-color:rgba(175,189,209,.4)}.theme-dark .brand-logo{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}}@media not print and (prefers-color-scheme:dark){.auto-theme-dark,.auto-theme-dark .dropdown-menu,.auto-theme-dark .example-bg,.auto-theme-dark .modal-content{color:#afbdd1;background:#222935}.auto-theme-dark .card,.auto-theme-dark .sidebar,.auto-theme-dark .topbar{color:inherit;background:#303645}.auto-theme-dark .text-body{color:#afbdd1!important}.auto-theme-dark .avatar-list-stacked .avatar{box-shadow:0 0 0 2px #222226}.auto-theme-dark .navbar-brand-logo{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}.auto-theme-dark .form-fieldset{border-color:transparent}.auto-theme-dark .form-check-input:not(:checked),.auto-theme-dark .form-control,.auto-theme-dark .form-select{background:0 0;border-color:rgba(175,189,209,.4);color:inherit}.auto-theme-dark .input-group-text{border-color:rgba(175,189,209,.4)}.auto-theme-dark .brand-logo{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}}
+/*# sourceMappingURL=tabler-dark.min.css.map */

demo/dist/css/tabler-payments.css

@@ -0,0 +1,382 @@
+/*!
+ * Tabler Payments (v0.1.0)
+ * Copyright 2018-2019 The Tabler Authors
+ * Copyright 2018-2019 codecalm
+ * 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-dark {
+  background-image: url("../img/payments/2checkout-dark.svg"); }
+
+.payment-provider-2checkout {
+  background-image: url("../img/payments/2checkout.svg"); }
+
+.payment-provider-alipay-dark {
+  background-image: url("../img/payments/alipay-dark.svg"); }
+
+.payment-provider-alipay {
+  background-image: url("../img/payments/alipay.svg"); }
+
+.payment-provider-amazon-dark {
+  background-image: url("../img/payments/amazon-dark.svg"); }
+
+.payment-provider-amazon {
+  background-image: url("../img/payments/amazon.svg"); }
+
+.payment-provider-americanexpress-dark {
+  background-image: url("../img/payments/americanexpress-dark.svg"); }
+
+.payment-provider-americanexpress {
+  background-image: url("../img/payments/americanexpress.svg"); }
+
+.payment-provider-applepay-dark {
+  background-image: url("../img/payments/applepay-dark.svg"); }
+
+.payment-provider-applepay {
+  background-image: url("../img/payments/applepay.svg"); }
+
+.payment-provider-bancontact-dark {
+  background-image: url("../img/payments/bancontact-dark.svg"); }
+
+.payment-provider-bancontact {
+  background-image: url("../img/payments/bancontact.svg"); }
+
+.payment-provider-bitcoin-dark {
+  background-image: url("../img/payments/bitcoin-dark.svg"); }
+
+.payment-provider-bitcoin {
+  background-image: url("../img/payments/bitcoin.svg"); }
+
+.payment-provider-bitpay-dark {
+  background-image: url("../img/payments/bitpay-dark.svg"); }
+
+.payment-provider-bitpay {
+  background-image: url("../img/payments/bitpay.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-dark {
+  background-image: url("../img/payments/cirrus-dark.svg"); }
+
+.payment-provider-cirrus {
+  background-image: url("../img/payments/cirrus.svg"); }
+
+.payment-provider-clickandbuy-dark {
+  background-image: url("../img/payments/clickandbuy-dark.svg"); }
+
+.payment-provider-clickandbuy {
+  background-image: url("../img/payments/clickandbuy.svg"); }
+
+.payment-provider-coinkite-dark {
+  background-image: url("../img/payments/coinkite-dark.svg"); }
+
+.payment-provider-coinkite {
+  background-image: url("../img/payments/coinkite.svg"); }
+
+.payment-provider-dinersclub-dark {
+  background-image: url("../img/payments/dinersclub-dark.svg"); }
+
+.payment-provider-dinersclub {
+  background-image: url("../img/payments/dinersclub.svg"); }
+
+.payment-provider-directdebit-dark {
+  background-image: url("../img/payments/directdebit-dark.svg"); }
+
+.payment-provider-directdebit {
+  background-image: url("../img/payments/directdebit.svg"); }
+
+.payment-provider-discover-dark {
+  background-image: url("../img/payments/discover-dark.svg"); }
+
+.payment-provider-discover {
+  background-image: url("../img/payments/discover.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-dark {
+  background-image: url("../img/payments/dwolla-dark.svg"); }
+
+.payment-provider-dwolla {
+  background-image: url("../img/payments/dwolla.svg"); }
+
+.payment-provider-ebay-dark {
+  background-image: url("../img/payments/ebay-dark.svg"); }
+
+.payment-provider-ebay {
+  background-image: url("../img/payments/ebay.svg"); }
+
+.payment-provider-eway-dark {
+  background-image: url("../img/payments/eway-dark.svg"); }
+
+.payment-provider-eway {
+  background-image: url("../img/payments/eway.svg"); }
+
+.payment-provider-giropay-dark {
+  background-image: url("../img/payments/giropay-dark.svg"); }
+
+.payment-provider-giropay {
+  background-image: url("../img/payments/giropay.svg"); }
+
+.payment-provider-googlewallet-dark {
+  background-image: url("../img/payments/googlewallet-dark.svg"); }
+
+.payment-provider-googlewallet {
+  background-image: url("../img/payments/googlewallet.svg"); }
+
+.payment-provider-ingenico-dark {
+  background-image: url("../img/payments/ingenico-dark.svg"); }
+
+.payment-provider-ingenico {
+  background-image: url("../img/payments/ingenico.svg"); }
+
+.payment-provider-jcb-dark {
+  background-image: url("../img/payments/jcb-dark.svg"); }
+
+.payment-provider-jcb {
+  background-image: url("../img/payments/jcb.svg"); }
+
+.payment-provider-klarna-dark {
+  background-image: url("../img/payments/klarna-dark.svg"); }
+
+.payment-provider-klarna {
+  background-image: url("../img/payments/klarna.svg"); }
+
+.payment-provider-laser-dark {
+  background-image: url("../img/payments/laser-dark.svg"); }
+
+.payment-provider-laser {
+  background-image: url("../img/payments/laser.svg"); }
+
+.payment-provider-maestro-dark {
+  background-image: url("../img/payments/maestro-dark.svg"); }
+
+.payment-provider-maestro {
+  background-image: url("../img/payments/maestro.svg"); }
+
+.payment-provider-mastercard-dark {
+  background-image: url("../img/payments/mastercard-dark.svg"); }
+
+.payment-provider-mastercard {
+  background-image: url("../img/payments/mastercard.svg"); }
+
+.payment-provider-mir-dark {
+  background-image: url("../img/payments/mir-dark.svg"); }
+
+.payment-provider-mir {
+  background-image: url("../img/payments/mir.svg"); }
+
+.payment-provider-monero-dark {
+  background-image: url("../img/payments/monero-dark.svg"); }
+
+.payment-provider-monero {
+  background-image: url("../img/payments/monero.svg"); }
+
+.payment-provider-neteller-dark {
+  background-image: url("../img/payments/neteller-dark.svg"); }
+
+.payment-provider-neteller {
+  background-image: url("../img/payments/neteller.svg"); }
+
+.payment-provider-ogone-dark {
+  background-image: url("../img/payments/ogone-dark.svg"); }
+
+.payment-provider-ogone {
+  background-image: url("../img/payments/ogone.svg"); }
+
+.payment-provider-okpay-dark {
+  background-image: url("../img/payments/okpay-dark.svg"); }
+
+.payment-provider-okpay {
+  background-image: url("../img/payments/okpay.svg"); }
+
+.payment-provider-paybox-dark {
+  background-image: url("../img/payments/paybox-dark.svg"); }
+
+.payment-provider-paybox {
+  background-image: url("../img/payments/paybox.svg"); }
+
+.payment-provider-paymill-dark {
+  background-image: url("../img/payments/paymill-dark.svg"); }
+
+.payment-provider-paymill {
+  background-image: url("../img/payments/paymill.svg"); }
+
+.payment-provider-payone-dark {
+  background-image: url("../img/payments/payone-dark.svg"); }
+
+.payment-provider-payone {
+  background-image: url("../img/payments/payone.svg"); }
+
+.payment-provider-payoneer-dark {
+  background-image: url("../img/payments/payoneer-dark.svg"); }
+
+.payment-provider-payoneer {
+  background-image: url("../img/payments/payoneer.svg"); }
+
+.payment-provider-paypal-dark {
+  background-image: url("../img/payments/paypal-dark.svg"); }
+
+.payment-provider-paypal {
+  background-image: url("../img/payments/paypal.svg"); }
+
+.payment-provider-paysafecard-dark {
+  background-image: url("../img/payments/paysafecard-dark.svg"); }
+
+.payment-provider-paysafecard {
+  background-image: url("../img/payments/paysafecard.svg"); }
+
+.payment-provider-payu-dark {
+  background-image: url("../img/payments/payu-dark.svg"); }
+
+.payment-provider-payu {
+  background-image: url("../img/payments/payu.svg"); }
+
+.payment-provider-payza-dark {
+  background-image: url("../img/payments/payza-dark.svg"); }
+
+.payment-provider-payza {
+  background-image: url("../img/payments/payza.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-dark {
+  background-image: url("../img/payments/ripple-dark.svg"); }
+
+.payment-provider-ripple {
+  background-image: url("../img/payments/ripple.svg"); }
+
+.payment-provider-sage-dark {
+  background-image: url("../img/payments/sage-dark.svg"); }
+
+.payment-provider-sage {
+  background-image: url("../img/payments/sage.svg"); }
+
+.payment-provider-sepa-dark {
+  background-image: url("../img/payments/sepa-dark.svg"); }
+
+.payment-provider-sepa {
+  background-image: url("../img/payments/sepa.svg"); }
+
+.payment-provider-shopify-dark {
+  background-image: url("../img/payments/shopify-dark.svg"); }
+
+.payment-provider-shopify {
+  background-image: url("../img/payments/shopify.svg"); }
+
+.payment-provider-skrill-dark {
+  background-image: url("../img/payments/skrill-dark.svg"); }
+
+.payment-provider-skrill {
+  background-image: url("../img/payments/skrill.svg"); }
+
+.payment-provider-solo-dark {
+  background-image: url("../img/payments/solo-dark.svg"); }
+
+.payment-provider-solo {
+  background-image: url("../img/payments/solo.svg"); }
+
+.payment-provider-square-dark {
+  background-image: url("../img/payments/square-dark.svg"); }
+
+.payment-provider-square {
+  background-image: url("../img/payments/square.svg"); }
+
+.payment-provider-stripe-dark {
+  background-image: url("../img/payments/stripe-dark.svg"); }
+
+.payment-provider-stripe {
+  background-image: url("../img/payments/stripe.svg"); }
+
+.payment-provider-switch-dark {
+  background-image: url("../img/payments/switch-dark.svg"); }
+
+.payment-provider-switch {
+  background-image: url("../img/payments/switch.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-dark {
+  background-image: url("../img/payments/ukash-dark.svg"); }
+
+.payment-provider-ukash {
+  background-image: url("../img/payments/ukash.svg"); }
+
+.payment-provider-unionpay-dark {
+  background-image: url("../img/payments/unionpay-dark.svg"); }
+
+.payment-provider-unionpay {
+  background-image: url("../img/payments/unionpay.svg"); }
+
+.payment-provider-verifone-dark {
+  background-image: url("../img/payments/verifone-dark.svg"); }
+
+.payment-provider-verifone {
+  background-image: url("../img/payments/verifone.svg"); }
+
+.payment-provider-verisign-dark {
+  background-image: url("../img/payments/verisign-dark.svg"); }
+
+.payment-provider-verisign {
+  background-image: url("../img/payments/verisign.svg"); }
+
+.payment-provider-visa-dark {
+  background-image: url("../img/payments/visa-dark.svg"); }
+
+.payment-provider-visa {
+  background-image: url("../img/payments/visa.svg"); }
+
+.payment-provider-webmoney-dark {
+  background-image: url("../img/payments/webmoney-dark.svg"); }
+
+.payment-provider-webmoney {
+  background-image: url("../img/payments/webmoney.svg"); }
+
+.payment-provider-westernunion-dark {
+  background-image: url("../img/payments/westernunion-dark.svg"); }
+
+.payment-provider-westernunion {
+  background-image: url("../img/payments/westernunion.svg"); }
+
+.payment-provider-worldpay-dark {
+  background-image: url("../img/payments/worldpay-dark.svg"); }
+
+.payment-provider-worldpay {
+  background-image: url("../img/payments/worldpay.svg"); }
+
+.payment-sm {
+  width: 2.49999rem;
+  height: 1.5rem; }
+
+.payment-lg {
+  width: 4.99998rem;
+  height: 3rem; }
+
+.payment-xl {
+  width: 6.66664rem;
+  height: 4rem; }
+/*# sourceMappingURL=tabler-payments.css.map */

demo/dist/css/tabler-rtl.css

@@ -0,0 +1,16 @@
+html[dir="rtl"] body {
+  text-align: right;
+  direction: rtl; }
+
+html[dir="rtl"] .hide-rtl {
+  display: none !important; }
+
+html[dir="rtl"] .show-rtl {
+  display: block !important; }
+
+html[dir="rtl"] .float-right {
+  float: left !important; }
+
+html[dir="rtl"] .float-left {
+  float: right !important; }
+/*# sourceMappingURL=tabler-rtl.css.map */

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

@@ -0,0 +1,2 @@
+html[dir=rtl] body{text-align:right;direction:rtl}html[dir=rtl] .hide-rtl{display:none!important}html[dir=rtl] .show-rtl{display:block!important}html[dir=rtl] .float-right{float:left!important}html[dir=rtl] .float-left{float:right!important}
+/*# sourceMappingURL=tabler-rtl.min.css.map */

demo/dist/img/flags/ae.svg

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

demo/dist/img/flags/ag.svg

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

demo/dist/img/flags/al.svg

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

demo/dist/img/flags/am.svg

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

demo/dist/img/flags/ao.svg

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

demo/dist/img/flags/aq.svg

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

demo/dist/img/flags/ar.svg

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

demo/dist/img/flags/at.svg

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

demo/dist/img/flags/au.svg

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

demo/dist/img/flags/ax.svg

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

demo/dist/img/flags/az.svg

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

demo/dist/img/flags/ba.svg

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

demo/dist/img/flags/bb.svg

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

demo/dist/img/flags/bd.svg

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

demo/dist/img/flags/be.svg

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

demo/dist/img/flags/bf.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480"><g fill-rule="evenodd"><path fill="#de0000" d="M640 479.6H.4V0H640z"/><path fill="#35a100" d="M639.6 480H0V240.2h639.6z"/><path fill="#fff300" d="M254.6 276.2l-106-72.4h131L320 86.6 360.4 204l131-.1-106 72.4 40.5 117.3-106-72.6L214 393.4"/></g></svg>

demo/dist/img/flags/bg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480"><g fill-rule="evenodd" stroke-width="1pt"><path fill="#d62612" d="M0 320h640v160H0z"/><path fill="#fff" d="M0 0h640v160H0z"/><path fill="#00966e" d="M0 160h640v160H0z"/></g></svg>

demo/dist/img/flags/bh.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480"><defs><clipPath id="a"><path fill-opacity=".7" d="M0 0h640v480H0z"/></clipPath></defs><g fill-rule="evenodd" stroke-width="1pt" clip-path="url(#a)"><path fill="#e10011" d="M-32.5 0h720v480h-720z"/><path fill="#fff" d="M114.3 479.8l-146.8.2V0h146l94.3 30.4-93.5 29.5 93.5 30.5-93.5 29.5 93.5 30.5-93.5 29.5 93.5 30.5-93.5 29.5 93.5 30.5-93.5 29.5 93.5 30.5-93.5 29.5 93.5 30.5-93.5 29.5 93.5 30.5-93.5 29.5"/></g></svg>

demo/dist/img/flags/bi.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480"><defs><clipPath id="a"><path fill-opacity=".7" d="M-90.5 0H592v512H-90.5z"/></clipPath></defs><g fill-rule="evenodd" clip-path="url(#a)" transform="translate(84.9) scale(.9375)"><path fill="#00cf00" d="M-178 0l428.8 256L-178 512zm857.6 0L250.8 256l428.8 256z"/><path fill="red" d="M-178 0l428.8 256L679.6 0zm0 512l428.8-256 428.8 256z"/><path fill="#fff" d="M679.6 0h-79.9L-178 464.3V512h79.9L679.6 47.7z"/><path fill="#fff" d="M398.9 256a148 148 0 1 1-296.1 0 148 148 0 0 1 296 0z"/><path fill="#fff" d="M-178 0v47.7L599.7 512h79.9v-47.7L-98.1 0z"/><path fill="red" stroke="#00de00" stroke-width="3.9" d="M280 200.2l-19.3.3-10 16.4-9.9-16.4-19.2-.4 9.3-16.9-9.2-16.8 19.2-.4 10-16.4 9.9 16.5 19.2.4-9.3 16.8zm-64.6 111.6l-19.2.3-10 16.4-9.9-16.4-19.2-.4 9.3-16.9-9.2-16.8 19.2-.4 10-16.4 9.9 16.5 19.2.4-9.3 16.8zm130.6 0l-19.2.3-10 16.4-10-16.4-19.1-.4 9.3-16.9-9.3-16.8 19.2-.4 10-16.4 10 16.5 19.2.4-9.4 16.8z"/></g></svg>

demo/dist/img/flags/bj.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480"><defs><clipPath id="a"><path fill="gray" d="M67.6-154h666v666h-666z"/></clipPath></defs><g clip-path="url(#a)" transform="matrix(.961 0 0 .7207 -65 111)"><g fill-rule="evenodd" stroke-width="1pt"><path fill="#319400" d="M0-154h333v666H0z"/><path fill="#ffd600" d="M333-154h666v333H333z"/><path fill="#de2110" d="M333 179h666v333H333z"/></g></g></svg>

demo/dist/img/flags/bl.svg

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