codecalm 4 лет назад
Родитель
Сommit
db74390ce7
10 измененных файлов с 0 добавлено и 9964 удалено
  1. 0 902
      demo/all.html
  2. 0 584
      demo/blank.html
  3. 0 1361
      demo/buttons.html
  4. 0 780
      demo/calendar.html
  5. 0 842
      demo/cards-masonry.html
  6. 0 1066
      demo/cards.html
  7. 0 741
      demo/carousel.html
  8. 0 583
      demo/changelog.html
  9. 0 764
      demo/charts-heatmap.html
  10. 0 2341
      demo/charts.html

+ 0 - 902
demo/all.html

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

+ 0 - 584
demo/blank.html

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

+ 0 - 1361
demo/buttons.html

@@ -1,1361 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.7
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Buttons - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
-        <div class="container-xl">
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
-          </a>
-          <div class="navbar-nav flex-row order-md-last">
-            <div class="nav-item dropdown d-none d-md-flex mr-3">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                <span class="badge bg-red"></span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="nav-item dropdown">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-xl-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
-                  Separated link</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </header>
-      <div class="navbar-expand-md">
-        <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
-            <div class="container-xl">
-              <ul class="navbar-nav">
-                <li class="nav-item">
-                  <a class="nav-link" href="./index.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Home
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      User Interface
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
-                    <li >
-                      <a class="dropdown-item" href="./empty.html" >
-                        Empty page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./blank.html" >
-                        Blank page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item active" href="./buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./cards-masonry.html" >
-                        Cards Masonry
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./dropdowns.html" >
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./icons.html" >
-                        Icons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./modals.html" >
-                        Modals
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maps.html" >
-                        Maps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maps-vector.html" >
-                        Vector maps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./navigation.html" >
-                        Navigation
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./pagination.html" >
-                        Pagination
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./error-404.html" class="dropdown-item">404 page</a>
-                        <a href="./error-500.html" class="dropdown-item">500 page</a>
-                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./form-elements.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Form elements
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Extra
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./pricing.html" >
-                        Pricing cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./welcome.html" >
-                        Welcome
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Layout
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./layout-horizontal.html" >
-                        Horizontal
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-vertical.html" >
-                        Vertical
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-vertical-right.html" >
-                        Right vertical
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-condensed.html" >
-                        Condensed
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                        Condensed dark
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-combo.html" >
-                        Combined
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-navbar-dark.html" >
-                        Navbar dark
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
-                        Navbar overlap
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-dark.html" >
-                        Dark mode
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-fluid.html" >
-                        Fluid
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-fluid-vertical.html" >
-                        Fluid vertical
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Docs
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                    <li >
-                      <a class="dropdown-item" href="./docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/dropdowns.html" >
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/modals.html" >
-                        Modals
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/ribbons.html" >
-                        Ribbons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="content">
-        <div class="container-xl">
-          <!-- Page title -->
-          <div class="page-header">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Buttons
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-12">
-              <div class="card">
-                <div class="card-header">
-                  <h3 class="card-title">Standard Buttons</h3>
-                </div>
-                <div class="card-body">
-                  <div class="row row-sm align-items-center mb-n3">
-                    <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Normal</div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-primary btn-block">
-                        Primary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-secondary btn-block">
-                        Secondary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-success btn-block">
-                        Success
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-warning btn-block">
-                        Warning
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-danger btn-block">
-                        Danger
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-info btn-block">
-                        Info
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-light btn-block">
-                        Light
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-dark btn-block">
-                        Dark
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-link btn-block">
-                        Link
-                      </a>
-                    </div>
-                  </div>
-                  <div class="row row-sm align-items-center mb-n3 mt-3">
-                    <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Active state</div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-primary active btn-block">
-                        Primary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-secondary active btn-block">
-                        Secondary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-success active btn-block">
-                        Success
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-warning active btn-block">
-                        Warning
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-danger active btn-block">
-                        Danger
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-info active btn-block">
-                        Info
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-light active btn-block">
-                        Light
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-dark active btn-block">
-                        Dark
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-link active btn-block">
-                        Link
-                      </a>
-                    </div>
-                  </div>
-                  <div class="row row-sm align-items-center mb-n3 mt-3">
-                    <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Disabled</div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-primary disabled btn-block">
-                        Primary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-secondary disabled btn-block">
-                        Secondary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-success disabled btn-block">
-                        Success
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-warning disabled btn-block">
-                        Warning
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-danger disabled btn-block">
-                        Danger
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-info disabled btn-block">
-                        Info
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-light disabled btn-block">
-                        Light
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-dark disabled btn-block">
-                        Dark
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-link disabled btn-block">
-                        Link
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card">
-                <div class="card-header">
-                  <h3 class="card-title">Outline Buttons</h3>
-                </div>
-                <div class="card-body">
-                  <p>Use <code>.btn-outline-*</code> class for outline buttons.
-                  </p>
-                  <div class="row row-sm align-items-center mb-n3">
-                    <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Normal</div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-primary btn-block">
-                        Primary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-secondary btn-block">
-                        Secondary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-success btn-block">
-                        Success
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-warning btn-block">
-                        Warning
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-danger btn-block">
-                        Danger
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-info btn-block">
-                        Info
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-light btn-block">
-                        Light
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-dark btn-block">
-                        Dark
-                      </a>
-                    </div>
-                  </div>
-                  <div class="row row-sm align-items-center mb-n3 mt-3">
-                    <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Active state</div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-primary active btn-block">
-                        Primary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-secondary active btn-block">
-                        Secondary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-success active btn-block">
-                        Success
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-warning active btn-block">
-                        Warning
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-danger active btn-block">
-                        Danger
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-info active btn-block">
-                        Info
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-light active btn-block">
-                        Light
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-dark active btn-block">
-                        Dark
-                      </a>
-                    </div>
-                  </div>
-                  <div class="row row-sm align-items-center mb-n3 mt-3">
-                    <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Disabled</div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-primary disabled btn-block">
-                        Primary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-secondary disabled btn-block">
-                        Secondary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-success disabled btn-block">
-                        Success
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-warning disabled btn-block">
-                        Warning
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-danger disabled btn-block">
-                        Danger
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-info disabled btn-block">
-                        Info
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-light disabled btn-block">
-                        Light
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-outline-dark disabled btn-block">
-                        Dark
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card">
-                <div class="card-header">
-                  <h3 class="card-title">Ghost Buttons</h3>
-                </div>
-                <div class="card-body">
-                  <p>Use <code>.btn-ghost-*</code> class for ghost buttons.
-                  </p>
-                  <div class="row row-sm align-items-center mb-n3">
-                    <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Normal</div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-primary btn-block">
-                        Primary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-secondary btn-block">
-                        Secondary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-success btn-block">
-                        Success
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-warning btn-block">
-                        Warning
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-danger btn-block">
-                        Danger
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-info btn-block">
-                        Info
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-light btn-block">
-                        Light
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-dark btn-block">
-                        Dark
-                      </a>
-                    </div>
-                  </div>
-                  <div class="row row-sm align-items-center mb-n3 mt-3">
-                    <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Active state</div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-primary active btn-block">
-                        Primary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-secondary active btn-block">
-                        Secondary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-success active btn-block">
-                        Success
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-warning active btn-block">
-                        Warning
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-danger active btn-block">
-                        Danger
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-info active btn-block">
-                        Info
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-light active btn-block">
-                        Light
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-dark active btn-block">
-                        Dark
-                      </a>
-                    </div>
-                  </div>
-                  <div class="row row-sm align-items-center mb-n3 mt-3">
-                    <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Disabled</div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-primary disabled btn-block">
-                        Primary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-secondary disabled btn-block">
-                        Secondary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-success disabled btn-block">
-                        Success
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-warning disabled btn-block">
-                        Warning
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-danger disabled btn-block">
-                        Danger
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-info disabled btn-block">
-                        Info
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-light disabled btn-block">
-                        Light
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-ghost-dark disabled btn-block">
-                        Dark
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card">
-                <div class="card-header">
-                  <h3 class="card-title">Square Buttons</h3>
-                </div>
-                <div class="card-body">
-                  <p>Use <code>.btn-square</code> class for square buttons.
-                  </p>
-                  <div class="row row-sm align-items-center mb-n3">
-                    <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Normal</div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-primary btn-square btn-block">
-                        Primary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-secondary btn-square btn-block">
-                        Secondary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-success btn-square btn-block">
-                        Success
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-warning btn-square btn-block">
-                        Warning
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-danger btn-square btn-block">
-                        Danger
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-info btn-square btn-block">
-                        Info
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-light btn-square btn-block">
-                        Light
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-dark btn-square btn-block">
-                        Dark
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card">
-                <div class="card-header">
-                  <h3 class="card-title">Pill Buttons</h3>
-                </div>
-                <div class="card-body">
-                  <p>Use <code>.btn-pill</code> class for pill buttons.
-                  </p>
-                  <div class="row row-sm align-items-center mb-n3">
-                    <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Normal</div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-primary btn-pill btn-block">
-                        Primary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-secondary btn-pill btn-block">
-                        Secondary
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-success btn-pill btn-block">
-                        Success
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-warning btn-pill btn-block">
-                        Warning
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-danger btn-pill btn-block">
-                        Danger
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-info btn-pill btn-block">
-                        Info
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-light btn-pill btn-block">
-                        Light
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-dark btn-pill btn-block">
-                        Dark
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card">
-                <div class="card-header">
-                  <h3 class="card-title">Extra colors</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-blue btn-block">
-                        Blue
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                      <a href="#" class="btn btn-azure btn-block">
-                        Azure
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                      <a href="#" class="btn btn-indigo btn-block">
-                        Indigo
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                      <a href="#" class="btn btn-purple btn-block">
-                        Purple
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                      <a href="#" class="btn btn-pink btn-block">
-                        Pink
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                      <a href="#" class="btn btn-red btn-block">
-                        Red
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                      <a href="#" class="btn btn-orange btn-block">
-                        Orange
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                      <a href="#" class="btn btn-yellow btn-block">
-                        Yellow
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                      <a href="#" class="btn btn-lime btn-block">
-                        Lime
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                      <a href="#" class="btn btn-green btn-block">
-                        Green
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                      <a href="#" class="btn btn-teal btn-block">
-                        Teal
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                      <a href="#" class="btn btn-cyan btn-block">
-                        Cyan
-                      </a>
-                    </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                      <a href="#" class="btn btn-gray btn-block">
-                        Gray
-                      </a>
-                    </div>
-                  </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>
-                </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">
-                        <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>
-                        Facebook
-                      </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">
-                        <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>
-                        Twitter
-                      </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">
-                        <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>
-                        Google
-                      </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">
-                        <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>
-                        Youtube
-                      </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">
-                        <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>
-                        Vimeo
-                      </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">
-                        <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>
-                        Dribbble
-                      </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">
-                        <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>
-                        Github
-                      </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">
-                        <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>
-                        Instagram
-                      </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">
-                        <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>
-                        Pinterest
-                      </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">
-                        <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>
-                        VK
-                      </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">
-                        <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>
-                        RSS
-                      </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">
-                        <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>
-                        Flickr
-                      </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">
-                        <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>
-                        Bitbucker
-                      </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">
-                        <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>
-                        Tabler
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <footer class="footer footer-transparent">
-          <div class="container">
-            <div class="row text-center align-items-center flex-row-reverse">
-              <div class="col-lg-auto ml-lg-auto">
-                <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
-                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
-                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
-                </ul>
-              </div>
-              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
-                Copyright © 2020
-                <a href="." class="link-secondary">Tabler</a>.
-                All rights reserved.
-              </div>
-            </div>
-          </div>
-        </footer>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

+ 0 - 780
demo/calendar.html

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

+ 0 - 842
demo/cards-masonry.html

@@ -1,842 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.7
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Cards Masonry - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
-        <div class="container-xl">
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
-          </a>
-          <div class="navbar-nav flex-row order-md-last">
-            <div class="nav-item dropdown d-none d-md-flex mr-3">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                <span class="badge bg-red"></span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="nav-item dropdown">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-xl-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
-                  Separated link</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </header>
-      <div class="navbar-expand-md">
-        <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
-            <div class="container-xl">
-              <ul class="navbar-nav">
-                <li class="nav-item">
-                  <a class="nav-link" href="./index.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Home
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      User Interface
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
-                    <li >
-                      <a class="dropdown-item" href="./empty.html" >
-                        Empty page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./blank.html" >
-                        Blank page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item active" href="./cards-masonry.html" >
-                        Cards Masonry
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./dropdowns.html" >
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./icons.html" >
-                        Icons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./modals.html" >
-                        Modals
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maps.html" >
-                        Maps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maps-vector.html" >
-                        Vector maps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./navigation.html" >
-                        Navigation
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./pagination.html" >
-                        Pagination
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./error-404.html" class="dropdown-item">404 page</a>
-                        <a href="./error-500.html" class="dropdown-item">500 page</a>
-                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./form-elements.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Form elements
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Extra
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./pricing.html" >
-                        Pricing cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./welcome.html" >
-                        Welcome
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Layout
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./layout-horizontal.html" >
-                        Horizontal
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-vertical.html" >
-                        Vertical
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-vertical-right.html" >
-                        Right vertical
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-condensed.html" >
-                        Condensed
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                        Condensed dark
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-combo.html" >
-                        Combined
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-navbar-dark.html" >
-                        Navbar dark
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
-                        Navbar overlap
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-dark.html" >
-                        Dark mode
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-fluid.html" >
-                        Fluid
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-fluid-vertical.html" >
-                        Fluid vertical
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Docs
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                    <li >
-                      <a class="dropdown-item" href="./docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/dropdowns.html" >
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/modals.html" >
-                        Modals
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/ribbons.html" >
-                        Ribbons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="content">
-        <div class="container-xl">
-          <!-- Page title -->
-          <div class="page-header">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Cards Masonry
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row" data-masonry='{"percentPosition": true }'>
-            <div class="col-sm-6 col-lg-4">
-              <div class="card">
-                <div class="card-body">
-                  <p>This is some text within a card body.</p>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-lg-4">
-              <div class="card">
-                <div class="card-body">
-                  <h3 class="card-title">Card with bottom image</h3>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                </div>
-                <div class="card-img-bottom img-responsive img-responsive-16by9" style="background-image: url(./static/photos/56614e12b2a7bd68.jpg)"></div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-lg-4">
-              <div class="card">
-                <div class="card-body">
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                </div>
-                <!-- Card footer -->
-                <div class="card-footer">
-                  <div class="row align-items-center">
-                    <div class="col-auto">
-                      <a href="#">More information</a>
-                    </div>
-                    <div class="col-auto ml-auto">
-                      <label class="form-check form-switch m-0">
-                        <input class="form-check-input position-static" type="checkbox" checked>
-                      </label>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-lg-4">
-              <div class="card">
-                <div class="card-body">
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                </div>
-                <!-- Card footer -->
-                <div class="card-footer">
-                  <div class="row align-items-center">
-                    <div class="col-auto ml-auto">
-                      <div class="avatar-list avatar-list-stacked">
-                        <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                        <span class="avatar">JL</span>
-                        <span class="avatar" style="background-image: url(./static/avatars/002m.jpg)"></span>
-                        <span class="avatar" style="background-image: url(./static/avatars/003m.jpg)"></span>
-                        <span class="avatar" style="background-image: url(./static/avatars/000f.jpg)"></span>
-                        <span class="avatar">+3</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-lg-4">
-              <div class="card">
-                <div class="card-header">
-                  <ul class="nav nav-tabs card-header-tabs">
-                    <li class="nav-item">
-                      <a class="nav-link active" href="#">
-                        Active
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a class="nav-link" href="#">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                        Link
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
-                        Disabled
-                      </a>
-                    </li>
-                    <li class="nav-item ml-auto">
-                      <a class="nav-link" href="#">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-                <div class="card-body">
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-lg-4">
-              <div class="card">
-                <div class="card-header">
-                  <ul class="nav nav-pills card-header-pills">
-                    <li class="nav-item">
-                      <a class="nav-link active" href="#">
-                        Active
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a class="nav-link" href="#">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                        Link
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
-                        Disabled
-                      </a>
-                    </li>
-                    <li class="nav-item ml-auto">
-                      <a class="nav-link" href="#">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-                <div class="card-body">
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-lg-4">
-              <div class="card">
-                <div class="empty">
-                  <div class="empty-icon">
-                    <img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128" class="mb-4"  alt="">
-                  </div>
-                  <p class="empty-title h3">No results found</p>
-                  <p class="empty-subtitle text-muted">
-                    Try adjusting your search or filter to find what you're looking for.
-                  </p>
-                  <div class="empty-action">
-                    <a href="./." class="btn btn-primary">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      Search again
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-lg-4">
-              <div class="card">
-                <div class="card-body">
-                  <h3 class="card-title">Card with progress bar</h3>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                </div>
-                <div class="progress progress-sm card-progress">
-                  <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
-                    <span class="visually-hidden">38% Complete</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-lg-4">
-              <div class="card">
-                <div class="card-body">
-                  <h3 class="card-title">Card title</h3>
-                  <div class="card-subtitle">Card subtitle</div>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-lg-4">
-              <div class="card">
-                <div class="card-header">
-                  <h3 class="card-title">Header title</h3>
-                </div>
-                <div class="card-body">
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-lg-4">
-              <div class="card">
-                <div class="card-body">
-                  <div class="mb-3">
-                    <div class="form-label">Card number</div>
-                    <input type="text" name="input-mask" class="form-control" data-mask="0000 0000 0000 0000" data-mask-visible="true" autocomplete="off"/>
-                  </div>
-                  <div class="mb-3">
-                    <div class="form-label">Card name</div>
-                    <input type="text" class="form-control">
-                  </div>
-                  <div class="row">
-                    <div class="col-8">
-                      <div class="mb-3">
-                        <label class="form-label">Expiration date</label>
-                        <div class="row row-sm">
-                          <div class="col">
-                            <select class="form-select">
-                              <option value="1">1</option>
-                              <option value="2">2</option>
-                              <option value="3">3</option>
-                              <option value="4">4</option>
-                              <option value="5">5</option>
-                              <option value="6">6</option>
-                              <option value="7">7</option>
-                              <option value="8">8</option>
-                              <option value="9">9</option>
-                              <option value="10">10</option>
-                              <option value="11">11</option>
-                              <option value="12">12</option>
-                            </select>
-                          </div>
-                          <div class="col">
-                            <select class="form-select">
-                              <option value="2020">2020</option>
-                              <option value="2021">2021</option>
-                              <option value="2022">2022</option>
-                              <option value="2023">2023</option>
-                              <option value="2024">2024</option>
-                              <option value="2025">2025</option>
-                              <option value="2026">2026</option>
-                              <option value="2027">2027</option>
-                              <option value="2028">2028</option>
-                              <option value="2029">2029</option>
-                              <option value="2030">2030</option>
-                            </select>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="col">
-                      <div class="mb-3">
-                        <div class="form-label">CVV</div>
-                        <input type="number" class="form-control">
-                      </div>
-                    </div>
-                  </div>
-                  <div class="mt-2">
-                    <a href="#" class="btn btn-primary btn-block">
-                      Pay now
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <footer class="footer footer-transparent">
-          <div class="container">
-            <div class="row text-center align-items-center flex-row-reverse">
-              <div class="col-lg-auto ml-lg-auto">
-                <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
-                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
-                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
-                </ul>
-              </div>
-              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
-                Copyright © 2020
-                <a href="." class="link-secondary">Tabler</a>.
-                All rights reserved.
-              </div>
-            </div>
-          </div>
-        </footer>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function () {
-      	/**
-      	 * Input mask
-      	 */
-      	var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
-      	maskElementList.map(function (maskEl) {
-      		return new IMask(maskEl, {
-      			mask: maskEl.dataset.mask,
-      			lazy: maskEl.dataset['mask-visible'] === 'true'
-      		})
-      	});
-      })();
-    </script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

+ 0 - 1066
demo/cards.html

@@ -1,1066 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.7
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Cards - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
-        <div class="container-xl">
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
-          </a>
-          <div class="navbar-nav flex-row order-md-last">
-            <div class="nav-item dropdown d-none d-md-flex mr-3">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                <span class="badge bg-red"></span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="nav-item dropdown">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-xl-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
-                  Separated link</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </header>
-      <div class="navbar-expand-md">
-        <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
-            <div class="container-xl">
-              <ul class="navbar-nav">
-                <li class="nav-item">
-                  <a class="nav-link" href="./index.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Home
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      User Interface
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
-                    <li >
-                      <a class="dropdown-item" href="./empty.html" >
-                        Empty page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./blank.html" >
-                        Blank page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item active" href="./cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./cards-masonry.html" >
-                        Cards Masonry
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./dropdowns.html" >
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./icons.html" >
-                        Icons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./modals.html" >
-                        Modals
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maps.html" >
-                        Maps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maps-vector.html" >
-                        Vector maps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./navigation.html" >
-                        Navigation
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./pagination.html" >
-                        Pagination
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./error-404.html" class="dropdown-item">404 page</a>
-                        <a href="./error-500.html" class="dropdown-item">500 page</a>
-                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./form-elements.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Form elements
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Extra
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./pricing.html" >
-                        Pricing cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./welcome.html" >
-                        Welcome
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Layout
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./layout-horizontal.html" >
-                        Horizontal
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-vertical.html" >
-                        Vertical
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-vertical-right.html" >
-                        Right vertical
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-condensed.html" >
-                        Condensed
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                        Condensed dark
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-combo.html" >
-                        Combined
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-navbar-dark.html" >
-                        Navbar dark
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
-                        Navbar overlap
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-dark.html" >
-                        Dark mode
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-fluid.html" >
-                        Fluid
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-fluid-vertical.html" >
-                        Fluid vertical
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Docs
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                    <li >
-                      <a class="dropdown-item" href="./docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/dropdowns.html" >
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/modals.html" >
-                        Modals
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/ribbons.html" >
-                        Ribbons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="content">
-        <div class="container-xl">
-          <!-- Page title -->
-          <div class="page-header">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Cards
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-md-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <p>This is some text within a card body.</p>
-                </div>
-              </div>
-              <div class="card">
-                <div class="card-body">
-                  <h3 class="card-title">Card with bottom image</h3>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                </div>
-                <div class="card-img-bottom img-responsive img-responsive-16by9" style="background-image: url(./static/photos/56614e12b2a7bd68.jpg)"></div>
-              </div>
-              <div class="card card-active">
-                <div class="card-body">
-                  <p>This is a card with active state.</p>
-                </div>
-              </div>
-              <div class="card card-inactive">
-                <div class="card-body">
-                  <p>This is some text inactive state.</p>
-                </div>
-              </div>
-              <div class="card">
-                <div class="card-body">
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                </div>
-                <!-- Card footer -->
-                <div class="card-footer">
-                  <div class="row align-items-center">
-                    <div class="col-auto">
-                      <a href="#">More information</a>
-                    </div>
-                    <div class="col-auto ml-auto">
-                      <label class="form-check form-switch m-0">
-                        <input class="form-check-input position-static" type="checkbox" checked>
-                      </label>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card">
-                <div class="card-body">
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                </div>
-                <!-- Card footer -->
-                <div class="card-footer">
-                  <div class="row align-items-center">
-                    <div class="col-auto ml-auto">
-                      <div class="avatar-list avatar-list-stacked">
-                        <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                        <span class="avatar">JL</span>
-                        <span class="avatar" style="background-image: url(./static/avatars/002m.jpg)"></span>
-                        <span class="avatar" style="background-image: url(./static/avatars/003m.jpg)"></span>
-                        <span class="avatar" style="background-image: url(./static/avatars/000f.jpg)"></span>
-                        <span class="avatar">+3</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card">
-                <div class="card-header">
-                  <ul class="nav nav-tabs card-header-tabs">
-                    <li class="nav-item">
-                      <a class="nav-link active" href="#">
-                        Active
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a class="nav-link" href="#">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                        Link
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
-                        Disabled
-                      </a>
-                    </li>
-                    <li class="nav-item ml-auto">
-                      <a class="nav-link" href="#">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-                <div class="card-body">
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                </div>
-              </div>
-              <div class="card">
-                <div class="card-header">
-                  <ul class="nav nav-pills card-header-pills">
-                    <li class="nav-item">
-                      <a class="nav-link active" href="#">
-                        Active
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a class="nav-link" href="#">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                        Link
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
-                        Disabled
-                      </a>
-                    </li>
-                    <li class="nav-item ml-auto">
-                      <a class="nav-link" href="#">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-                <div class="card-body">
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                </div>
-              </div>
-              <div class="card">
-                <div class="card-body">
-                  <h3 class="card-title">Card with progress bar</h3>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                </div>
-                <div class="progress progress-sm card-progress">
-                  <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
-                    <span class="visually-hidden">38% Complete</span>
-                  </div>
-                </div>
-              </div>
-              <div class="card">
-                <div class="empty">
-                  <div class="empty-icon">
-                    <img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128" class="mb-4"  alt="">
-                  </div>
-                  <p class="empty-title h3">No results found</p>
-                  <p class="empty-subtitle text-muted">
-                    Try adjusting your search or filter to find what you're looking for.
-                  </p>
-                  <div class="empty-action">
-                    <a href="./." class="btn btn-primary">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      Search again
-                    </a>
-                  </div>
-                </div>
-              </div>
-              <!-- Cards with tabs component -->
-              <div class="card-tabs">
-                <!-- Cards navigation -->
-                <ul class="nav nav-tabs">
-                  <li class="nav-item"><a href="#tab-top-1" class="nav-link active" data-toggle="tab">Tab 1</a></li>
-                  <li class="nav-item"><a href="#tab-top-2" class="nav-link" data-toggle="tab">Tab 2</a></li>
-                  <li class="nav-item"><a href="#tab-top-3" class="nav-link" data-toggle="tab">Tab 3</a></li>
-                  <li class="nav-item"><a href="#tab-top-4" class="nav-link" data-toggle="tab">Tab 4</a></li>
-                </ul>
-                <div class="tab-content">
-                  <!-- Content of card #1 -->
-                  <div id="tab-top-1" class="card tab-pane active show">
-                    <div class="card-body">
-                      <div class="card-title">Content of tab #1</div>
-                      <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-                      </p>
-                    </div>
-                  </div>
-                  <!-- Content of card #2 -->
-                  <div id="tab-top-2" class="card tab-pane">
-                    <div class="card-body">
-                      <div class="card-title">Content of tab #2</div>
-                      <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-                      </p>
-                    </div>
-                  </div>
-                  <!-- Content of card #3 -->
-                  <div id="tab-top-3" class="card tab-pane">
-                    <div class="card-body">
-                      <div class="card-title">Content of tab #3</div>
-                      <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-                      </p>
-                    </div>
-                  </div>
-                  <!-- Content of card #4 -->
-                  <div id="tab-top-4" class="card tab-pane">
-                    <div class="card-body">
-                      <div class="card-title">Content of tab #4</div>
-                      <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <!-- Cards with tabs component -->
-              <div class="card-tabs">
-                <div class="tab-content">
-                  <!-- Content of card #1 -->
-                  <div id="tab-bottom-1" class="card tab-pane active show">
-                    <div class="card-body">
-                      <div class="card-title">Content of tab #1</div>
-                      <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-                      </p>
-                    </div>
-                  </div>
-                  <!-- Content of card #2 -->
-                  <div id="tab-bottom-2" class="card tab-pane">
-                    <div class="card-body">
-                      <div class="card-title">Content of tab #2</div>
-                      <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-                      </p>
-                    </div>
-                  </div>
-                  <!-- Content of card #3 -->
-                  <div id="tab-bottom-3" class="card tab-pane">
-                    <div class="card-body">
-                      <div class="card-title">Content of tab #3</div>
-                      <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-                      </p>
-                    </div>
-                  </div>
-                  <!-- Content of card #4 -->
-                  <div id="tab-bottom-4" class="card tab-pane">
-                    <div class="card-body">
-                      <div class="card-title">Content of tab #4</div>
-                      <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <!-- Cards navigation -->
-                <ul class="nav nav-tabs nav-tabs-bottom">
-                  <li class="nav-item"><a href="#tab-bottom-1" class="nav-link active" data-toggle="tab">Tab 1</a></li>
-                  <li class="nav-item"><a href="#tab-bottom-2" class="nav-link" data-toggle="tab">Tab 2</a></li>
-                  <li class="nav-item"><a href="#tab-bottom-3" class="nav-link" data-toggle="tab">Tab 3</a></li>
-                  <li class="nav-item"><a href="#tab-bottom-4" class="nav-link" data-toggle="tab">Tab 4</a></li>
-                </ul>
-              </div>
-            </div>
-            <div class="col-md-6 col-xl-8">
-              <div class="card">
-                <div class="row row-0">
-                  <div class="col-3">
-                    <img src="./static/photos/2854fd67ddbd6217.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-                  </div>
-                  <div class="col">
-                    <div class="card-body">
-                      <h3 class="card-title">Card with left side image</h3>
-                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card">
-                <div class="row row-0">
-                  <div class="col-3 order-md-last">
-                    <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">
-                      <h3 class="card-title">Card with right side image</h3>
-                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card-group">
-                <a href="#" class="card card-inactive text-center">
-                  <div class="card-body">
-                    <p>This is first card</p>
-                  </div>
-                </a>
-                <a href="#" class="card card-active text-center">
-                  <div class="card-body">
-                    <p>This is second card</p>
-                  </div>
-                </a>
-                <a href="#" class="card text-center">
-                  <div class="card-body">
-                    <p>This is third card</p>
-                  </div>
-                </a>
-              </div>
-              <div class="row">
-                <div class="col-xl-6">
-                  <div class="card">
-                    <div class="card-img-top img-responsive img-responsive-16by9" style="background-image: url(./static/photos/9f36332564ca271d.jpg)"></div>
-                    <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
-                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                    </div>
-                  </div>
-                  <div class="card">
-                    <div class="card-body">
-                      <h3 class="card-title">Card with button link</h3>
-                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                      <div class="card-text">
-                        <a href="#" class="btn btn-primary">Go somewhere</a>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="card">
-                    <div class="card-status-top bg-danger"></div>
-                    <div class="card-body">
-                      <h3 class="card-title">Card with top status</h3>
-                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                    </div>
-                  </div>
-                  <div class="card">
-                    <div class="card-status-bottom bg-success"></div>
-                    <div class="card-body">
-                      <h3 class="card-title">Card with bottom status</h3>
-                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                    </div>
-                  </div>
-                  <div class="card">
-                    <div class="card-status-left bg-primary"></div>
-                    <div class="card-body">
-                      <h3 class="card-title">Card with side status</h3>
-                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                    </div>
-                  </div>
-                  <div class="card card-stacked">
-                    <div class="card-body">
-                      <h3 class="card-title">Stacked card</h3>
-                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                    </div>
-                  </div>
-                  <div class="card">
-                    <div class="card-body">
-                      <div class="mb-3">
-                        <div class="form-label">Card number</div>
-                        <input type="text" name="input-mask" class="form-control" data-mask="0000 0000 0000 0000" data-mask-visible="true" autocomplete="off"/>
-                      </div>
-                      <div class="mb-3">
-                        <div class="form-label">Card name</div>
-                        <input type="text" class="form-control">
-                      </div>
-                      <div class="row">
-                        <div class="col-8">
-                          <div class="mb-3">
-                            <label class="form-label">Expiration date</label>
-                            <div class="row row-sm">
-                              <div class="col">
-                                <select class="form-select">
-                                  <option value="1">1</option>
-                                  <option value="2">2</option>
-                                  <option value="3">3</option>
-                                  <option value="4">4</option>
-                                  <option value="5">5</option>
-                                  <option value="6">6</option>
-                                  <option value="7">7</option>
-                                  <option value="8">8</option>
-                                  <option value="9">9</option>
-                                  <option value="10">10</option>
-                                  <option value="11">11</option>
-                                  <option value="12">12</option>
-                                </select>
-                              </div>
-                              <div class="col">
-                                <select class="form-select">
-                                  <option value="2020">2020</option>
-                                  <option value="2021">2021</option>
-                                  <option value="2022">2022</option>
-                                  <option value="2023">2023</option>
-                                  <option value="2024">2024</option>
-                                  <option value="2025">2025</option>
-                                  <option value="2026">2026</option>
-                                  <option value="2027">2027</option>
-                                  <option value="2028">2028</option>
-                                  <option value="2029">2029</option>
-                                  <option value="2030">2030</option>
-                                </select>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                        <div class="col">
-                          <div class="mb-3">
-                            <div class="form-label">CVV</div>
-                            <input type="number" class="form-control">
-                          </div>
-                        </div>
-                      </div>
-                      <div class="mt-2">
-                        <a href="#" class="btn btn-primary btn-block">
-                          Pay now
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-xl-6">
-                  <div class="card">
-                    <div class="card-body">
-                      <h3 class="card-title">Card title</h3>
-                      <div class="card-subtitle">Card subtitle</div>
-                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                    </div>
-                  </div>
-                  <div class="card">
-                    <div class="card-header">
-                      <h3 class="card-title">Header title</h3>
-                    </div>
-                    <div class="card-body">
-                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                    </div>
-                  </div>
-                  <div class="card">
-                    <div class="card-body">
-                      <h3 class="card-title">Card with footer</h3>
-                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                    </div>
-                    <!-- Card footer -->
-                    <div class="card-footer">
-                      This is standard card footer
-                    </div>
-                  </div>
-                  <div class="card">
-                    <div class="card-body">
-                      <h3 class="card-title">Card with footer button</h3>
-                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                    </div>
-                    <!-- Card footer -->
-                    <div class="card-footer">
-                      <a href="#" class="btn btn-primary">Go somewhere</a>
-                    </div>
-                  </div>
-                  <div class="card">
-                    <div class="card-body">
-                      <h3 class="card-title">Card with footer buttons</h3>
-                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-                    </div>
-                    <!-- Card footer -->
-                    <div class="card-footer">
-                      <div class="d-flex">
-                        <a href="#" class="btn btn-link">Cancel</a>
-                        <a href="#" class="btn btn-primary ml-auto">Go somewhere</a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <footer class="footer footer-transparent">
-          <div class="container">
-            <div class="row text-center align-items-center flex-row-reverse">
-              <div class="col-lg-auto ml-lg-auto">
-                <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
-                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
-                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
-                </ul>
-              </div>
-              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
-                Copyright © 2020
-                <a href="." class="link-secondary">Tabler</a>.
-                All rights reserved.
-              </div>
-            </div>
-          </div>
-        </footer>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/imask/dist/imask.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function () {
-      	/**
-      	 * Input mask
-      	 */
-      	var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
-      	maskElementList.map(function (maskEl) {
-      		return new IMask(maskEl, {
-      			mask: maskEl.dataset.mask,
-      			lazy: maskEl.dataset['mask-visible'] === 'true'
-      		})
-      	});
-      })();
-    </script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

+ 0 - 741
demo/carousel.html

@@ -1,741 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.7
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Carousel - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
-        <div class="container-xl">
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
-          </a>
-          <div class="navbar-nav flex-row order-md-last">
-            <div class="nav-item dropdown d-none d-md-flex mr-3">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                <span class="badge bg-red"></span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="nav-item dropdown">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-xl-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
-                  Separated link</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </header>
-      <div class="navbar-expand-md">
-        <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
-            <div class="container-xl">
-              <ul class="navbar-nav">
-                <li class="nav-item">
-                  <a class="nav-link" href="./index.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Home
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      User Interface
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
-                    <li >
-                      <a class="dropdown-item" href="./empty.html" >
-                        Empty page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./blank.html" >
-                        Blank page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./cards-masonry.html" >
-                        Cards Masonry
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./dropdowns.html" >
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./icons.html" >
-                        Icons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./modals.html" >
-                        Modals
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maps.html" >
-                        Maps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maps-vector.html" >
-                        Vector maps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./navigation.html" >
-                        Navigation
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./pagination.html" >
-                        Pagination
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./tables.html" >
-                        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 class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./error-404.html" class="dropdown-item">404 page</a>
-                        <a href="./error-500.html" class="dropdown-item">500 page</a>
-                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./form-elements.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Form elements
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Extra
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./pricing.html" >
-                        Pricing cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./welcome.html" >
-                        Welcome
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Layout
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./layout-horizontal.html" >
-                        Horizontal
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-vertical.html" >
-                        Vertical
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-vertical-right.html" >
-                        Right vertical
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-condensed.html" >
-                        Condensed
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                        Condensed dark
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-combo.html" >
-                        Combined
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-navbar-dark.html" >
-                        Navbar dark
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
-                        Navbar overlap
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-dark.html" >
-                        Dark mode
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-fluid.html" >
-                        Fluid
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-fluid-vertical.html" >
-                        Fluid vertical
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Docs
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                    <li >
-                      <a class="dropdown-item" href="./docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/dropdowns.html" >
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/modals.html" >
-                        Modals
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/ribbons.html" >
-                        Ribbons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="content">
-        <div class="container-xl">
-          <!-- Page title -->
-          <div class="page-header">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Carousel
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-md-6">
-              <div class="card">
-                <div class="card-header">
-                  <h3 class="card-title">Carousel</h3>
-                </div>
-                <div class="card-body">
-                  <div id="carousel-default" class="carousel slide" data-ride="carousel">
-                    <div class="carousel-inner">
-                      <div class="carousel-item active">
-                        <img class="d-block w-100" alt="" src="./static/photos/1b73704b282a8ec6.jpg" data-holder-rendered="true">
-                      </div>
-                      <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./static/photos/3d2998219313cd37.jpg" data-holder-rendered="true">
-                      </div>
-                      <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./static/photos/6ab3200b14549f8a.jpg" data-holder-rendered="true">
-                      </div>
-                      <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./static/photos/6d35d9a2bd6c63c2.jpg" data-holder-rendered="true">
-                      </div>
-                      <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./static/photos/8a26974ee6444acd.jpg" data-holder-rendered="true">
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-md-6">
-              <div class="card">
-                <div class="card-header">
-                  <h3 class="card-title">Carousel with indicators</h3>
-                </div>
-                <div class="card-body">
-                  <div id="carousel-indicators" class="carousel slide" data-ride="carousel">
-                    <ol class="carousel-indicators">
-                      <li data-target="#carousel-indicators" data-slide-to="0" class="active"></li>
-                      <li data-target="#carousel-indicators" data-slide-to="1" class=""></li>
-                      <li data-target="#carousel-indicators" data-slide-to="2" class=""></li>
-                      <li data-target="#carousel-indicators" data-slide-to="3" class=""></li>
-                      <li data-target="#carousel-indicators" data-slide-to="4" class=""></li>
-                    </ol>
-                    <div class="carousel-inner">
-                      <div class="carousel-item active">
-                        <img class="d-block w-100" alt="" src="./static/photos/8c13ad59f739558c.jpg" data-holder-rendered="true">
-                      </div>
-                      <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./static/photos/8fdeb4785d2b82ef.jpg" data-holder-rendered="true">
-                      </div>
-                      <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./static/photos/9f36332564ca271d.jpg" data-holder-rendered="true">
-                      </div>
-                      <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./static/photos/35b88fc04a518c1b.jpg" data-holder-rendered="true">
-                      </div>
-                      <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./static/photos/36e273986ed577b8.jpg" data-holder-rendered="true">
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-md-6">
-              <div class="card">
-                <div class="card-header">
-                  <h3 class="card-title">Carousel with controls</h3>
-                </div>
-                <div class="card-body">
-                  <div id="carousel-controls" class="carousel slide" data-ride="carousel">
-                    <div class="carousel-inner">
-                      <div class="carousel-item active">
-                        <img class="d-block w-100" alt="" src="./static/photos/75b555b99d5b38c4.jpg" data-holder-rendered="true">
-                      </div>
-                      <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./static/photos/546fd146c83f428c.jpg" data-holder-rendered="true">
-                      </div>
-                      <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./static/photos/802a16cdf5ce3551.jpg" data-holder-rendered="true">
-                      </div>
-                      <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./static/photos/0986f97be719fb9a.jpg" data-holder-rendered="true">
-                      </div>
-                      <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./static/photos/1194d63fe36a8670.jpg" data-holder-rendered="true">
-                      </div>
-                    </div>
-                    <a class="carousel-control-prev" href="#carousel-controls" role="button" data-slide="prev">
-                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                      <span class="visually-hidden">Previous</span>
-                    </a>
-                    <a class="carousel-control-next" href="#carousel-controls" role="button" data-slide="next">
-                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                      <span class="visually-hidden">Next</span>
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-md-6">
-              <div class="card">
-                <div class="card-header">
-                  <h3 class="card-title">Carousel with captions</h3>
-                </div>
-                <div class="card-body">
-                  <div id="carousel-captions" class="carousel slide" data-ride="carousel">
-                    <div class="carousel-inner">
-                      <div class="carousel-item active">
-                        <img class="d-block w-100" alt="" src="./static/photos/1366fdc9b9b277e4.jpg" data-holder-rendered="true">
-                        <div class="carousel-item-background d-none d-md-block"></div>
-                        <div class="carousel-caption d-none d-md-block">
-                          <h3>Slide label</h3>
-                          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
-                        </div>
-                      </div>
-                      <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./static/photos/5358d787242861c4.jpg" data-holder-rendered="true">
-                        <div class="carousel-item-background d-none d-md-block"></div>
-                        <div class="carousel-caption d-none d-md-block">
-                          <h3>Slide label</h3>
-                          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
-                        </div>
-                      </div>
-                      <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./static/photos/5614ec7eb9034d04.jpg" data-holder-rendered="true">
-                        <div class="carousel-item-background d-none d-md-block"></div>
-                        <div class="carousel-caption d-none d-md-block">
-                          <h3>Slide label</h3>
-                          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
-                        </div>
-                      </div>
-                      <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./static/photos/56614e12b2a7bd68.jpg" data-holder-rendered="true">
-                        <div class="carousel-item-background d-none d-md-block"></div>
-                        <div class="carousel-caption d-none d-md-block">
-                          <h3>Slide label</h3>
-                          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
-                        </div>
-                      </div>
-                      <div class="carousel-item">
-                        <img class="d-block w-100" alt="" src="./static/photos/77586f6ffa9fbc5e.jpg" data-holder-rendered="true">
-                        <div class="carousel-item-background d-none d-md-block"></div>
-                        <div class="carousel-caption d-none d-md-block">
-                          <h3>Slide label</h3>
-                          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
-                        </div>
-                      </div>
-                    </div>
-                    <a class="carousel-control-prev" href="#carousel-captions" role="button" data-slide="prev">
-                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                      <span class="visually-hidden">Previous</span>
-                    </a>
-                    <a class="carousel-control-next" href="#carousel-captions" role="button" data-slide="next">
-                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                      <span class="visually-hidden">Next</span>
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <footer class="footer footer-transparent">
-          <div class="container">
-            <div class="row text-center align-items-center flex-row-reverse">
-              <div class="col-lg-auto ml-lg-auto">
-                <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
-                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
-                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
-                </ul>
-              </div>
-              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
-                Copyright © 2020
-                <a href="." class="link-secondary">Tabler</a>.
-                All rights reserved.
-              </div>
-            </div>
-          </div>
-        </footer>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

+ 0 - 583
demo/changelog.html

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

+ 0 - 764
demo/charts-heatmap.html

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

+ 0 - 2341
demo/charts.html

@@ -1,2341 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.7
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Charts - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
-        <div class="container-xl">
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
-          </a>
-          <div class="navbar-nav flex-row order-md-last">
-            <div class="nav-item dropdown d-none d-md-flex mr-3">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                <span class="badge bg-red"></span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="nav-item dropdown">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-xl-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
-                  Separated link</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </header>
-      <div class="navbar-expand-md">
-        <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
-            <div class="container-xl">
-              <ul class="navbar-nav">
-                <li class="nav-item">
-                  <a class="nav-link" href="./index.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Home
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      User Interface
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
-                    <li >
-                      <a class="dropdown-item" href="./empty.html" >
-                        Empty page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./blank.html" >
-                        Blank page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./cards-masonry.html" >
-                        Cards Masonry
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./dropdowns.html" >
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./icons.html" >
-                        Icons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./modals.html" >
-                        Modals
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maps.html" >
-                        Maps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maps-vector.html" >
-                        Vector maps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./navigation.html" >
-                        Navigation
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item active" href="./charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./pagination.html" >
-                        Pagination
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./calendar.html" >
-                        Calendar
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./lists.html" >
-                        Lists
-                      </a>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Authentication
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                      </div>
-                    </li>
-                    <li class="dropright">
-                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                        Error pages
-                      </a>
-                      <div class="dropdown-menu">
-                        <a href="./error-404.html" class="dropdown-item">404 page</a>
-                        <a href="./error-500.html" class="dropdown-item">500 page</a>
-                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./form-elements.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Form elements
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Extra
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./invoice.html" >
-                        Invoice
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./blog.html" >
-                        Blog cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./snippets.html" >
-                        Snippets
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./search-results.html" >
-                        Search results
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./pricing.html" >
-                        Pricing cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./users.html" >
-                        Users
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./gallery.html" >
-                        Gallery
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./profile.html" >
-                        Profile
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./music.html" >
-                        Music
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./welcome.html" >
-                        Welcome
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Layout
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./layout-horizontal.html" >
-                        Horizontal
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-vertical.html" >
-                        Vertical
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-vertical-right.html" >
-                        Right vertical
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-condensed.html" >
-                        Condensed
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                        Condensed dark
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-combo.html" >
-                        Combined
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-navbar-dark.html" >
-                        Navbar dark
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
-                        Navbar overlap
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-dark.html" >
-                        Dark mode
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-fluid.html" >
-                        Fluid
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./layout-fluid-vertical.html" >
-                        Fluid vertical
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Docs
-                    </span>
-                  </a>
-                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                    <li >
-                      <a class="dropdown-item" href="./docs/index.html" >
-                        Introduction
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/alerts.html" >
-                        Alerts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/autosize.html" >
-                        Autosize
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/avatars.html" >
-                        Avatars
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/badges.html" >
-                        Badges
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
-                        Breadcrumb
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/buttons.html" >
-                        Buttons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cards.html" >
-                        Cards
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/carousel.html" >
-                        Carousel
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/colors.html" >
-                        Colors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/cursors.html" >
-                        Cursors
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/charts.html" >
-                        Charts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/dropdowns.html" >
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/divider.html" >
-                        Divider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/empty.html" >
-                        Empty states
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/flags.html" >
-                        Flags
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-elements.html" >
-                        Form elements
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/form-helpers.html" >
-                        Form helpers
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/input-mask.html" >
-                        Form input mask
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/modals.html" >
-                        Modals
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/progress.html" >
-                        Progress
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/payments.html" >
-                        Payments
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/range-slider.html" >
-                        Range slider
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/ribbons.html" >
-                        Ribbons
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/spinners.html" >
-                        Spinners
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/steps.html" >
-                        Steps
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tables.html" >
-                        Tables
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tabs.html" >
-                        Tabs
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/timelines.html" >
-                        Timelines
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/toasts.html" >
-                        Toasts
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/tooltips.html" >
-                        Tooltips
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./docs/typography.html" >
-                        Typography
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="content">
-        <div class="container-xl">
-          <!-- Page title -->
-          <div class="page-header">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Charts
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="card">
-              <div class="card-body">
-                <div class="d-flex">
-                  <h3 class="card-title">Social referrals</h3>
-                  <div class="ml-auto">
-                    <div class="dropdown">
-                      <a class="dropdown-toggle text-muted" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                        Last 7 days
-                      </a>
-                      <div class="dropdown-menu dropdown-menu-right">
-                        <a class="dropdown-item active" href="#">Last 7 days</a>
-                        <a class="dropdown-item" href="#">Last 30 days</a>
-                        <a class="dropdown-item" href="#">Last 3 months</a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div id="chart-social-referrals"></div>
-              </div>
-            </div>
-            <div class="card">
-              <div class="card-body">
-                <div id="chart-tasks-overview"></div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-completion-tasks"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-completion-tasks2"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-completion-tasks3"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-completion-tasks4"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-completion-tasks5"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-completion-tasks6"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-completion-tasks7"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-completion-tasks8"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-completion-tasks9"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-completion-tasks10"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-completion-tasks11"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-total-sales"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-tasks"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-line-stroke"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-stepline"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-temperature"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-area"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-area-spline"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-area-spline-stacked"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-spline"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-scatter"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-6 col-xl-4">
-              <div class="card">
-                <div class="card-body">
-                  <div id="chart-combination"></div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <footer class="footer footer-transparent">
-          <div class="container">
-            <div class="row text-center align-items-center flex-row-reverse">
-              <div class="col-lg-auto ml-lg-auto">
-                <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
-                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
-                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
-                </ul>
-              </div>
-              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
-                Copyright © 2020
-                <a href="." class="link-secondary">Tabler</a>.
-                All rights reserved.
-              </div>
-            </div>
-          </div>
-        </footer>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/apexcharts/dist/apexcharts.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-social-referrals'), {
-      		chart: {
-      			type: "line",
-      			fontFamily: 'inherit',
-      			height: 192,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "smooth",
-      		},
-      		series: [{
-      			name: "Facebook",
-      			data: [13281, 8521, 15038, 9983, 15417, 8888, 7052, 14270, 5214, 9587, 5950, 16852, 17836, 12217, 17406, 12262, 9147, 14961, 18292, 15230, 13435, 10649, 5140, 13680, 4508, 13271, 13413, 5543, 18727, 18238, 18175, 6246, 5864, 17847, 9170, 6445, 12945, 8142, 8980, 10422, 15535, 11569, 10114, 17621, 16138, 13046, 6652, 9906, 14100, 16495, 6749]
-      		},{
-      			name: "Twitter",
-      			data: [3680, 1862, 3070, 2252, 5348, 3091, 3000, 3984, 5176, 5325, 2420, 5474, 3098, 1893, 3748, 2879, 4197, 5186, 4213, 4334, 2807, 1594, 4863, 2030, 3752, 4856, 5341, 3954, 3461, 3097, 3404, 4949, 2283, 3227, 3630, 2360, 3477, 4675, 1901, 2252, 3347, 2954, 5029, 2079, 2830, 3292, 4578, 3401, 4104, 3749, 4457, 3734]
-      		},{
-      			name: "Dribbble",
-      			data: [722, 1866, 961, 1108, 1110, 561, 1753, 1815, 1985, 776, 859, 547, 1488, 766, 702, 621, 1599, 1372, 1620, 963, 759, 764, 739, 789, 1696, 1454, 1842, 734, 551, 1689, 1924, 1875, 908, 1675, 1541, 1953, 534, 502, 1524, 1867, 719, 1472, 1608, 1025, 889, 1150, 654, 1695, 1662, 1285, 1787]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			strokeDashArray: 4,
-      			xaxis: {
-      				lines: {
-      					show: true
-      				}
-      			},
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0
-      			},
-      			tooltip: {
-      				enabled: 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', '2020-07-20', '2020-07-21', '2020-07-22', '2020-07-23', '2020-07-24', '2020-07-25', '2020-07-26', '2020-07-27', '2020-07-28', '2020-07-29', '2020-07-30', '2020-07-31', '2020-08-01', '2020-08-02', '2020-08-03', '2020-08-04', '2020-08-05', '2020-08-06', '2020-08-07', '2020-08-08', '2020-08-09'
-      		],
-      		colors: ["#3b5998", "#1da1f2", "#ea4c89"],
-      		legend: {
-      			show: true,
-      			position: 'bottom',
-      			height: 32,
-      			offsetY: 8,
-      			markers: {
-      				width: 8,
-      				height: 8,
-      				radius: 100,
-      			},
-      			itemMargin: {
-      				horizontal: 8,
-      			},
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-tasks-overview'), {
-      		chart: {
-      			type: "bar",
-      			fontFamily: 'inherit',
-      			height: 320,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		plotOptions: {
-      			bar: {
-      				columnWidth: '50%',
-      			}
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		series: [{
-      			name: "A",
-      			data: [44, 32, 48, 72, 60, 16, 44, 32, 78, 50, 68, 34, 26, 48, 72, 60, 84, 64, 74, 52, 62, 50, 32, 22]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0
-      			},
-      			tooltip: {
-      				enabled: false
-      			},
-      			axisBorder: {
-      				show: false,
-      			},
-      			categories: ["Sprint 1", "Sprint 2", "Sprint 3", "Sprint 4", "Sprint 5", "Sprint 6", "Sprint 7", "Sprint 8", "Sprint 9", "Sprint 10", "Sprint 11", "Sprint 12", "Sprint 13", "Sprint 14", "Sprint 15", "Sprint 16", "Sprint 17", "Sprint 18", "Sprint 19", "Sprint 20", "Sprint 21", "Sprint 22", "Sprint 23", "Sprint 24"],
-      		},
-      		yaxis: {
-      			labels: {
-      				padding: 4
-      			},
-      		},
-      		colors: ["#206bc4"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-completion-tasks'), {
-      		chart: {
-      			type: "bar",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		plotOptions: {
-      			bar: {
-      				columnWidth: '50%',
-      			}
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		series: [{
-      			name: "Tasks completion",
-      			data: [155, 65, 465, 265, 225, 325, 80]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			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'
-      		],
-      		colors: ["#206bc4"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-completion-tasks2'), {
-      		chart: {
-      			type: "line",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "smooth",
-      		},
-      		series: [{
-      			name: "Tasks completion",
-      			data: [155, 65, 465, 265, 225, 325, 80]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0
-      			},
-      			tooltip: {
-      				enabled: 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'
-      		],
-      		colors: ["#206bc4"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-completion-tasks3'), {
-      		chart: {
-      			type: "area",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: .16,
-      			type: 'solid'
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "smooth",
-      		},
-      		series: [{
-      			name: "Tasks completion",
-      			data: [155, 65, 465, 265, 225, 325, 80]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			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'
-      		],
-      		colors: ["#206bc4"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-completion-tasks4'), {
-      		chart: {
-      			type: "line",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "straight",
-      		},
-      		series: [{
-      			name: "Tasks completion",
-      			data: [155, 65, 465, 265, 225, 325, 80]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0
-      			},
-      			tooltip: {
-      				enabled: 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'
-      		],
-      		colors: ["#206bc4"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-completion-tasks5'), {
-      		chart: {
-      			type: "line",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "stepline",
-      		},
-      		series: [{
-      			name: "Tasks completion",
-      			data: [155, 65, 465, 265, 225, 325, 80]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0
-      			},
-      			tooltip: {
-      				enabled: 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'
-      		],
-      		colors: ["#206bc4"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-completion-tasks6'), {
-      		chart: {
-      			type: "bar",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		plotOptions: {
-      			bar: {
-      				barHeight: '50%',
-      		 		horizontal: true,
-      			}
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		series: [{
-      			name: "Tasks completion",
-      			data: [155, 65, 465, 265, 225, 325, 80]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			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'
-      		],
-      		colors: ["#206bc4"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-completion-tasks7'), {
-      		chart: {
-      			type: "line",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "smooth",
-      		},
-      		series: [{
-      			name: "Tasks completion",
-      			data: [155, 65, 465, 265, 225, 325, 80]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0
-      			},
-      			tooltip: {
-      				enabled: 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'
-      		],
-      		colors: ["#206bc4"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-completion-tasks8'), {
-      		chart: {
-      			type: "bar",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		plotOptions: {
-      			bar: {
-      				columnWidth: '50%',
-      			}
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		series: [{
-      			name: "",
-      			data: [155, 65, 465, 265, 225, 325, 80]
-      		},{
-      			name: "",
-      			data: [113, 42, 65, 54, 76, 65, 35]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			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'
-      		],
-      		colors: ["#206bc4", "#cd201f"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-completion-tasks9'), {
-      		chart: {
-      			type: "bar",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      			stacked: true,
-      		},
-      		plotOptions: {
-      			bar: {
-      				columnWidth: '50%',
-      			}
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		series: [{
-      			name: "",
-      			data: [155, 65, 465, 265, 225, 325, 80]
-      		},{
-      			name: "",
-      			data: [113, 42, 65, 54, 76, 65, 35]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			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'
-      		],
-      		colors: ["#206bc4", "#cd201f"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-completion-tasks10'), {
-      		chart: {
-      			type: "area",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: .16,
-      			type: 'solid'
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "smooth",
-      		},
-      		series: [{
-      			name: "",
-      			data: [155, 65, 465, 265, 225, 325, 80]
-      		},{
-      			name: "",
-      			data: [113, 42, 65, 54, 76, 65, 35]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			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'
-      		],
-      		colors: ["#206bc4", "#cd201f"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-completion-tasks11'), {
-      		chart: {
-      			type: "area",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      			stacked: true,
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: .16,
-      			type: 'solid'
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "smooth",
-      		},
-      		series: [{
-      			name: "",
-      			data: [155, 65, 465, 265, 225, 325, 80]
-      		},{
-      			name: "",
-      			data: [113, 42, 65, 54, 76, 65, 35]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			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'
-      		],
-      		colors: ["#206bc4", "#cd201f"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-total-sales'), {
-      		chart: {
-      			type: "donut",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			sparkline: {
-      				enabled: true
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		series: [44, 55, 12, 2],
-      		labels: ["Direct", "Affilliate", "E-mail", "Other"],
-      		grid: {
-      			strokeDashArray: 4,
-      		},
-      		colors: ["#206bc4", "#79a6dc", "#bfe399", "#e9ecf1"],
-      		legend: {
-      			show: false,
-      		},
-      		tooltip: {
-      			fillSeriesColor: false
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-tasks'), {
-      		chart: {
-      			type: "line",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "smooth",
-      		},
-      		series: [{
-      			name: "New",
-      			data: [0, 0, 1, 2, 21, 9, 12, 10, 31, 13, 65, 10, 12, 6, 4, 3, 0]
-      		},{
-      			name: "Completed",
-      			data: [0, 0, 1, 2, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 2, 2, 0]
-      		},{
-      			name: "Closed",
-      			data: [0, 0, 1, 0, 2, 0, 1, 0, 2, 3, 0, 2, 3, 2, 1, 0, 0]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0
-      			},
-      			tooltip: {
-      				enabled: false
-      			},
-      			categories: ["M", "T", "W", "T", "F", "S", "S", "M", "T", "W", "T", "F", "S", "S", "M", "T", "W"],
-      		},
-      		yaxis: {
-      			labels: {
-      				padding: 4
-      			},
-      		},
-      		colors: ["#206bc4", "#94d82d", "#ff922b"],
-      		legend: {
-      			show: false,
-      		},
-      		tooltip: {
-      			enabled: false,
-      		},
-      		point: {
-      			show: false
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-line-stroke'), {
-      		chart: {
-      			type: "line",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "straight",
-      		},
-      		series: [{
-      			name: "Development",
-      			data: [8, 10, 11, 12, 20, 27, 30]
-      		},{
-      			name: "Marketing",
-      			data: [3, 16, 17, 19, 20, 30, 30]
-      		},{
-      			name: "Sales",
-      			data: [7, 10, 11, 18, 18, 18, 24]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0
-      			},
-      			tooltip: {
-      				enabled: false
-      			},
-      			categories: ["2013", "2014", "2015", "2016", "2017", "2018", "2019"],
-      		},
-      		yaxis: {
-      			labels: {
-      				padding: 4
-      			},
-      		},
-      		colors: ["#ff922b", "#206bc4", "#5eba00"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-stepline'), {
-      		chart: {
-      			type: "line",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "stepline",
-      		},
-      		series: [{
-      			name: "Development",
-      			data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			strokeDashArray: 4,
-      		},
-      		yaxis: {
-      			labels: {
-      				padding: 4
-      			},
-      		},
-      		colors: ["#ff922b"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-temperature'), {
-      		chart: {
-      			type: "line",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "smooth",
-      		},
-      		series: [{
-      			name: "Tokyo",
-      			data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
-      		},{
-      			name: "London",
-      			data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			strokeDashArray: 4,
-      		},
-      		dataLabels: {
-      			enabled: true,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0
-      			},
-      			tooltip: {
-      				enabled: false
-      			},
-      			categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-      		},
-      		yaxis: {
-      			labels: {
-      				padding: 4
-      			},
-      		},
-      		colors: ["#206bc4", "#5eba00"],
-      		legend: {
-      			show: false,
-      		},
-      		markers: {
-      			size: 2
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-area'), {
-      		chart: {
-      			type: "area",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: .16,
-      			type: 'solid'
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "smooth",
-      		},
-      		series: [{
-      			name: "Maximum",
-      			data: [11, 8, 15, 18, 19, 17]
-      		},{
-      			name: "Minimum",
-      			data: [7, 7, 5, 7, 9, 12]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0
-      			},
-      			tooltip: {
-      				enabled: false
-      			},
-      			axisBorder: {
-      				show: false,
-      			},
-      			categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
-      		},
-      		yaxis: {
-      			labels: {
-      				padding: 4
-      			},
-      		},
-      		colors: ["#206bc4", "#f66d9b"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-area-spline'), {
-      		chart: {
-      			type: "area",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: .16,
-      			type: 'solid'
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "smooth",
-      		},
-      		series: [{
-      			name: "Maximum",
-      			data: [11, 8, 15, 18, 19, 17]
-      		},{
-      			name: "Minimum",
-      			data: [7, 7, 5, 7, 9, 12]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0
-      			},
-      			tooltip: {
-      				enabled: false
-      			},
-      			axisBorder: {
-      				show: false,
-      			},
-      			categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
-      		},
-      		yaxis: {
-      			labels: {
-      				padding: 4
-      			},
-      		},
-      		colors: ["#206bc4", "#f66d9b"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-area-spline-stacked'), {
-      		chart: {
-      			type: "area",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      			stacked: true,
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: .16,
-      			type: 'solid'
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "smooth",
-      		},
-      		series: [{
-      			name: "Maximum",
-      			data: [11, 8, 15, 18, 19, 17]
-      		},{
-      			name: "Minimum",
-      			data: [7, 7, 5, 7, 9, 12]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0
-      			},
-      			tooltip: {
-      				enabled: false
-      			},
-      			axisBorder: {
-      				show: false,
-      			},
-      			categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
-      		},
-      		yaxis: {
-      			labels: {
-      				padding: 4
-      			},
-      		},
-      		colors: ["#206bc4", "#f66d9b"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-spline'), {
-      		chart: {
-      			type: "line",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "smooth",
-      		},
-      		series: [{
-      			name: "Hestavollane",
-      			data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
-      		},{
-      			name: "Vik",
-      			data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0
-      			},
-      			tooltip: {
-      				enabled: false
-      			},
-      			categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
-      		},
-      		yaxis: {
-      			labels: {
-      				padding: 4
-      			},
-      		},
-      		colors: ["#206bc4", "#5eba00"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-scatter'), {
-      		chart: {
-      			type: "scatter",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		series: [{
-      			name: "Maximum",
-      			data: [11, 8, 15, 18, 19, 17]
-      		},{
-      			name: "Minimum",
-      			data: [7, 7, 5, 7, 9, 12]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0
-      			},
-      			tooltip: {
-      				enabled: false
-      			},
-      			categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
-      		},
-      		yaxis: {
-      			labels: {
-      				padding: 4
-      			},
-      		},
-      		colors: ["#206bc4", "#f66d9b"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-combination'), {
-      		chart: {
-      			type: "bar",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		plotOptions: {
-      			bar: {
-      				columnWidth: '50%',
-      			}
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		series: [{
-      			name: "Development",
-      			data: [30, 20, 50, 40, 60, 50]
-      		},{
-      			name: "Marketing",
-      			data: [200, 130, 90, 240, 130, 220]
-      		},{
-      			name: "Sales",
-      			data: [300, 200, 160, 400, 250, 250]
-      		},{
-      			name: "Sales",
-      			data: [200, 130, 90, 240, 130, 220]
-      		}],
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0
-      			},
-      			tooltip: {
-      				enabled: false
-      			},
-      			axisBorder: {
-      				show: false,
-      			},
-      			categories: ["2013", "2014", "2015", "2016", "2017", "2018"],
-      		},
-      		yaxis: {
-      			labels: {
-      				padding: 4
-      			},
-      		},
-      		colors: ["#5eba00", "#f66d9b", "#5eba00", "#206bc4"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

Некоторые файлы не были показаны из-за большого количества измененных файлов